Menu Spacing CSS not working

sheldon911 · June 2015

Hi
I have been trying to change this all day, the spaciing between menu items is pretty large so im wanting to reduce it so i can fit more items. I have changed the css to

#Top_bar .menu > li > a span { padding: 0 10px; }

Tried other variations and important tags and its not working but it works in multiple apps i use to change css in a live view. The url is

http://visualcuisine.com/dev/lock/

Albert · June 2015

Hi,

to change spacing between menu items, please use below css:

#Top_bar .menu > li > a span:not(.description) { padding: 0 17px !important; }

janell · January 2020

Hi,
(sorry, I thought I was resonding to my question... However...)
I added it to the CSS code above in the Theme Options (& also to the Child CSS) but no luck. I am using the Header Builder, is that the problem?

I just tracked down this code, and it seems to be working:
.mhb-menu .menu > li > a > span {
display: block;

padding:-right: 13px; padding-left: 3px;}

Wonder why this works, and the one you gave me did not???????

Thanks so much for your help and time.
Janell

Pablo · January 2020

janell

This answer was posted in 2015, when BeTheme version was really early and the Header Builder was not even planned.

This CSS was made for the default headers from BeTheme and simply copied, will not work with Muffin Header Builder - probably even with default headers, structure of menu could changed.

From this time, we changed a lot of things on the support forum:

Custom CSSes are not important thing these days, because you can achieve almost all of the effects without it, that's why we prefer, to set things through the theme, because it's easier to investigate the problem when it will appear.

Of course, some elements will require CSS codes (it cannot be avoided) - like hiding some elements on items or changing color of hard-coded element - yes, we surely help with it.

As I said in another topic, changing this value can be problematic, because menu items can be misaligned and make a lot of responsive troubles, that's why we want to avoid creating CSS like that.

Because if one element will be misaligned, then another element will be pushed and you will have to create more and more of these CSSes.

We really suggest, to not to use this kind of custom css codes, just to use the "Grid Width" limitation

Thanks

janell · February 2020

Thank you for your answer. I am trying to use the Header Builder, but cannot get the "Mobile Menu" (the "lines" that are clicked to show the menu items) on the Tablet. I made the menu work on the computer, by changing font and reducing the space between the menu items so it all fits on one line, but now it is horrible on the tablet. However, this would be solved if I could get the Mobile Icon to appear on Tablets. In the Header Builder, I click on the Tablet button, then click on the Menu I've placed which brings up General. Then I select for "Replace with Menu Icon > Tablet & Mobile. But the tablet icon won't appear on the tablet.

Thanks again for your help.

Cheers,

Janell

Bryan · February 2020

Hey,

could you please send us a link so we can check why is that happening?

thanks

janell · February 2020

Still a temporary URL: http://gator4047.temp.domains/~theatrec/

Pablo · February 2020

The tablet break is working fine, it's set by the default to max width 960px, otherwise it displays the desktop version of the header.

What you would have to do, is to edit the Muffin Header Builder css and js code which is sadly not supported by us.

We'll consider about possibility to change the mobile/tablet break by providing the pixels value, but for now we are focused about the new support forum and documentation.

Thanks

janell · February 2020

The problem I have, and I see others have, is you have set the breakpoint for a tablet/landscape too wide. We need to get the hamburger menu to appear on tablets when they are in landscape. I don't think this is out of scope for Support as most of us when purchasing your theme, would think that it would be part of the code.

I also tried in the Header Builder to add a row and put the logo above the menu so the menu could have the entire width of the tablet to display, but it wouldn't work. Sorry, I am frustrated as there is no work around for something that should be a "given."

Please reconsider helping! I appreciate your time.

Cheers,

Susan

Pablo · February 2020

Sadly Susan, we are not able to help you - what you ask for, requires files customization what in reference to Item Support Policy is not allowed. So if you want to modify files and don't know how, you should contact your web developer.

We have to be equal for all of the customers.

But, we are discussing the possibility of changing the breakpoint on the Muffin Header Builder - probably, we'll include it but I cannot tell you exactly when, right now we have a lot of work about new support forum and documentation of the BeTheme - because both of them are currently quite old.

Thanks

janell · February 2020

HI Pablo,

But why can't I do what I mentioned above:
"I also tried in the Header Builder to add a row and put the logo above
the menu so the menu could have the entire width of the tablet to
display, but it wouldn't work." It didn't change at all.
Thanks for your help.
Susan

Pablo · February 2020

What do you mean by the 'it wouldn't work'

I recreated your layout and it works, only the action bar's content is not displayed because it's disabled on tablet by the default to prevent overlapping.

http://prntscr.com/r151xz

http://prntscr.com/r1522y

If you have single item in one of the three rows, it does not mean that it's 100% width, the content is always divided by three, but if your content is wider than 1/3, it's decreasing not used 1/3 columns to fit the populated with content column.

I hope it's understandable.

Thanks

janell · February 2020

HI Pablo,

Sorry, you are right, I wasn't clear.

It would not display the template menu, but duh, I realized why. Putting it on TEMPLATE didn't work for my iPad as your breakpoint is too wide, and that is why I can't see the Header Builder setting for template. On my iPad it shows the desktop computer configuration, and thus, the menu goes to the second line. Your examples are correct, but you are showing them at a width LESS than your set breakpoint for tablets. I think that is what is happening.

Yes, still frustrated.
Thanks,
Susan

Pablo · February 2020

So, is there anything else I can help you with?

There is no option to decrease/increase the breakpoint - we have noticed that on bigger ipads it stays on desktop, we'll surely take a deeper look at it.

Thanks

janell · February 2020

Thanks Pablo...(sigh)

Menu Spacing CSS not working

Comments