SOLVED: Mobile Menu - Top Level Menu Padding Issue

Bricks Version: 1.3.7-beta
Browser: Chrome 96.x
OS: Win10
URL: -

Creating a basic menu and configuring the padding for the sidebar menu items(Top Level Menu). It appears that when adding padding, in my case, trying to push the menu elements down in the bar a little bit, it’s applied to each menu item, not the menu as a whole. See pictures below.

Nothing applied. I wish these could be spaced closer, but not sure how to achieve this.

Changed just top padding to push the ‘menu’ down. It applies to each element within the menu.

1 Like

Hi Lyle,

the padding gets applied to each menu item. This is the intended and correct behavior. To move the whole ul-element down, you can use a single line of CSS:

.bricks-element-nav-menu ul.bricks-mobile-menu {
  margin-top: 200px;
}

Best regards,
timmse

1 Like

@timmse Really? That looks really odd by doing that and I’m trying to envision why I would want to space everything out when all I wanted to do was push the entire menu down on the slideout. I can see if you want to spread it ‘evenly’ between the top and bottom for that kind of effect, but this just doesn’t look right to me.

I’m going to suggest this should be a feature request update without having to add additional code manually. Do you want me to make an additional post on the feature request or can you move this thread?

Well, you wanted to push them “a little bit down”, not entirely :wink:
If you wish the whole menu to align to the bottom, change the vertical position to bottom.

Feel free to submit your request to the idea board, as this is the official way to submit requests. However, the category inside of the forum is meant to discuss ideas, not to submit them officially.

Best regards,
timmse

Yea, I just wanted a little more space from the top was the intent. I was just thinking the spacing options should be similar to anything else. The menu as a whole is a ‘element’ singular, and you can ‘adjust’ the elements within it. I’m viewing this simliar to having a ‘container’ and then adjusting things within the container. If that makes sense. :slight_smile:

I’ll post it on the suggestion board. More flexibility can’t be a bad thing. :+1:t2:

Flexibility isn’t a bad thing at all, but you are the first user asking for this specific setting.

So I’ve provided a ready to use solution in form of a single CSS property, that would be generated either way, even if there would be an option for this right inside of the builder. The generated CSS will probably look exactly like this (except for the value):

.bricks-element-nav-menu ul.bricks-mobile-menu {
  margin-top: 200px;
}

No offense, but rejecting one line of CSS is like “I want to swim but not get wet”, you know what I mean?

I am curious how many upvotes the idea gets :v: :slight_smile:

2 Likes

I hear ya, but it doesn’t necessarily have to be only the ‘top’. I mean, couldn’t this evolve into being able to create a more styled psuedo mega menu of sorts. Especially if you wanted to place other items? Just more of a thought on implementation from the builder standpoint to make it like a flexbox approach, that’s all. :slight_smile:

1 Like

First things first, right now we are at a simple margin :joy:
But a custom / mega menu is coming in one of the following versions of Bricks :wink:

2 Likes

Hi @timmse,
If this is intended, I think the input field is misplaced and should be moved to subitems tab:

(Like all other properties except border and box shadow which are actually associated to the submenu container.)

And I agree with @ocbroadband, a submenu (the container) padding would be nice.

1 Like

Hi Yan,
yeah, you’re right. The nav menu element is one of the toughest ones, as it contains so many settings and so many things to think about
 so it regularly causes a lot of headaches :sweat_smile:

1 Like

No offense but I have the same problem and frankly it is offensive to tell a paying customer, who uses your theme for the purpose of having a tool to build a specific look and feel without a bunch of custom CSS, that they should just add this one of custom code, which mind you
 doesn’t work.

I assume your team has since changed the class selector associated with the nav menu but that only reinforces my point. Making your customers have to keep track of changes you guys make to the theme so that their custom code can continue working isn’t how you do business.

image

As you can see from my example, there is no padding above the UL within the nav element. Making the text sit right at the edge of the screen. There also doesn’t appear to be a way to add some padding above the UL in the mobile nav menu. Which means myself and anyone else who is a paying customer will need to accept that we need to write “one line of CSS” to fix a problem you could easily fix by adding the ability to add some padding to the mobile nav menu element itself.

I don’t mean to be that guy but your little “No offense” statement is unprofessional to say the least. This shouldn’t be a feature request because it should just be a feature
 Look at the image above, it looks like trash out of the box and would require custom CSS to solve the problem. Your team added a “top” setting, which no one would ever need
 ever! Who wants to put a gap above the menu so the full screen menu starts below the top of the page?! Who requested that silly feature? Instead you could have given a padding option for the mobile menu itself. No, instead you tell people they should add one line of CSS so they can get wet while swimming.

Its pretty simple, the mobile menu should have a padding option. We shouldn’t need to use custom CSS to resolve this issue. We shouldn’t need to test our site after every update to make sure you guys didn’t change the nav menu selector again. We shouldn’t need to get on this support chat to ask how to handle this because it should just be there as an option. We also shouldn’t need to create a custom nav or mega menu to fix a problem because your team didn’t think to add a padding option to the mobile menu element.

Also, what is the “I am curious how many upvotes the idea gets :v: :slight_smile:” line about
 That is just putting salt on the wound because you can’t see an obvious need for a built in feature that shouldn’t require a feature request or upvotes to get your team to add it. Maybe instead of insulting your customers and being condescending all in the same issue you could instead make a better product so we don’t have to use custom CSS to fix something to trivial as adding padding to the mobile nav menu.

For any future people that come across this BUG report and scrolls past the broken advice and the toxic belittling by the mod. This is the custom line of CSS you can add to give you some padding above the bricks-mobile-menu element
 since the mod didn’t think it was important enough to add a padding option to the mobile nav menu itself.

.bricks-mobile-menu-wrapper {
        padding-top: 6rem;
    }

Obviously, change the padding value to whatever works for you.

Also, since we are pointing out thing that aren’t offensive. As you can see from the picture below, another reason why I wanted to add some padding to the mobile menu is because I can’t see the menu behind the wpadminbar. But I am sure your team thought of that too? You know, like maybe making the mobile menu account for the wpadminbar so logged in user can actually use the menu if they are on their device? The definitely wouldn’t have missed something so silly, right? Oh wait they did and after two more years there still isn’t a padding option for the mobile nav menu and non one has fixed it so they wpadminbar doesn’t cover part of the menu for logged in users.

image

Hi @UniqueUsername ,
Welcome to the forum, and thanks so much for your detailed opinion on this topic.

Since this report refers to a version from 2.5 years ago, something has changed in the code since then, so the class you mentioned is now correct. Nevertheless, the issue Lyle reported back then is still not a bug, and a missing setting isn’t a bug either.

From my point of view, I only did one thing back then: I provided a concrete solution. I have done this since day 1, when I joined the forum as a normal user, and I will continue to do so if possible. If my statements hurt anyone’s feelings or gave the impression that I wasn’t taking it seriously, I certainly didn’t mean it that way.

I might be wrong, but there has not been another report on this in the last 2.5 years, nor has the report received many likes, which would normally be a sign of a “real” need. This does not mean we will never introduce a setting for this - only that it does not yet exist and is not planned.

Thanks for the hint regarding the offcanvas menu that is hidden by the wp admin bar :+1:

Hi guys,

We’ve added this improvement in Bricks 1.10 beta, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

Best regards,
M

1 Like