My logo gets cut off by the menu hamburger when the site gets narrowed to a mobile view

[sunrise]

I have a logo on the left and an extra menu on the right in my header.  The bottom half of the logo gets cut off on mobile, I think because the menu area has covered it.  The menu is also not positioned very nicely.  And I have a 1 pixel line in my post header that displays as 2 lines on mobile.  I’m thinking that I’m going to have to insert a few show-if, hide-if shortcodes for each of these.  But is there an easier way I’m just overlooking?  Site is http://ca3.windshiftdesign.com/   Thanks!

[scrambler]

what was the layout you wanted for  desktop, small tablet and phones?

And so what do you have in Main options > Header > Header widget Area > Custom Widget width > Desktop / small tablet / phones boxes?

Because it looks like you have 30,70;100;  in the desktop box, but nothing in the others.

Do you want the logo and the menu to stack on small tablet and phones, or to stay side by side with 30/70 ratio?

[scrambler]

If you wanted logo and menu stacked on mobile  (which is what you have right now), the issue is the way you added overflow:visible to the widget for the extra menu.

Right now you applied the rule to all widgets, may be with a rule

.widget {overflow:visible;}

Inside the Header Widget Area BG CSS+ box.

You will need to change that so the rule only applies to the second widget and desktop. remove the rule you have now, and instead add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

You also have a padding top on the extra widget div, which you probably do not want on mobile if the extra menu is stacked then. if so you can remove that top padding from your widget content and put it with the overflow rule below.

.is-desktop #header-widget-area .widget-2 {overflow:visible;padding-top:50px;}

[sunrise]

Ok, I’m almost there now, thanks.  I removed the padding on the extra widget div, and added 100;100; to the custom widget width for mobile so that the logo and menu would stack.  There is quite a bit of white space between the logo and the menu though and it takes up most of the screen.  How can I remove that padding, I’m assuming it’s the default.

Also, is there a way to put the word MENU beside the hamburger.  It seems that there are still a lot of users who don’t know what the hamburger is.

And finally, the mobile menu has submenu dropdowns – I seem to recall from Weaver II that when a menu with a submenu was on a mobile device it would display the entire menu with the submenu items indented under their parent.  Is there a switch for that?

Thanks!

[scrambler]

Right now what I am seeing is

desktop: 30,70;100;
Small tablet: 30,70;100;
Phones: 100;100;100;

So the mobile menu is side by side on small tablets, and stacked on phones.

1- I told you where the padding came from, it comes from an inline style on your content div inside the second widget, with padding-top:50px; which is still there

So you need to remove the inline style on the div that contains the extra menu.

If you want to keep the padding on small tablets for the side by side extra menu, add the rule below

.is-smalltablet #header-widget-area .widget-2 {padding-top:50px;}

2- To add the MENU text read item #2 in the tutorial below

http://forum.weavertheme.com/discussion/11685/weaver-xtreme-tips-and-tutorial-part-6

3- The mobile menu is a slide open menu, main menu item open when you click on the hamburger, sub menu open when you click on a menu item.

If you want the sub menus to always be opened, you can add the rule below to do that

.is-menu-mobile ul.wvrx-menu.sm ul {display:block;}

[sunrise]

It all seems to be working fairly well now, thanks for the guidance! Just the last rule to keep the submenus open isn’t working. When I first put it in, my phone responded by displaying submenu items, but then I fixed some of the other things and now it’s back to the default even though the rule is still there unchanged. The default doesn’t work very well in this case because the main menu items that have submenus also display as a page themselves, so if you click on the item you could be trying to see the page or the submenu. Not good UX. Thanks!

[scrambler]

Because you switched to non smart menu so the rule needs to be changed to

.is-menu-mobile ul.wvrx-menu ul {display:block;}

[sunrise]

Thank you, that did it.  I am in learning mode having just switched from Weaver II.

There are 2 more styling details in the mobile menu that I can’t figure out.  One is that the first item on a submenu has a larger space between it and its parent menu item than the rest of the menu items have.  And second, I hid the submenu arrows but they only disappeared on the desktop version, not mobile.

Is there a resource somewhere that explains smart menus?  I’ve looked on the forum and in the document that opens from the question marks in the backend and the tips and tutorials link and couldn’t find a good description of what smart menus do other than allowing you to set the pixel width where the menu switches from desktop to mobile.  Turning them on and off in this particular website didn’t make a difference.

Thank you SO much!

[scrambler]

– You can remove the space above the first sub menus with the rules below

.is-menu-default.is-mobile .wvrx-menu-container ul li:first-child.menu-item {margin-top:0;}
.is-mobile-menu.menu-arrows ul {padding-top:0;}

– You can remove the arrow in the mobile menu with

.menu-arrows .toggle-submenu::after {content:””;}

– Help on smart menu, click, on the red help bubble in +Xtreme Plus > Smart Menus page

[sunrise]

Awesome!  That is done!  Thank you!

[Author]

Posts