Making Desktop Version Top-Level Menu Resemble the Mobile Version

• 

  triciaannemitchell · Member · Jan 4, 2018 at 8:12 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  I like the look of my top-level menu when it is displayed on a mobile device. Instead of the menu headings (e.g. Home, About, Contact, etc.) the word “MENU” appears in a rectangle.

  With the desktop version, however, the menu headings sometimes spill onto two lines. When a desktop screen’s width is slightly narrowed, the transparent menu bar turns to jet-black and doubles in size, obstructing photographs.

  Replacing the menu headings with the word “MENU” for both desktop & mobile versions would fix this, I think. It also seems it would make my site look more streamlined.

  I’d like to get this MENU box on the desktop version. Is there any way to do this?

  Many thanks! :)

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 4, 2018 at 9:44 pm

  • Copy link

  Hi there, I’ve looked at the menu CSS and tried a several things, but the menu javascript is controlling things. I can get the menu toggle to appear, but the javascript is controlling the appearance of the menu when the toggle is clicked/tapped, and we can’t change the javascript. It could be done with the Business plan, but it would be a good bit of work and require some javascript experience.

• 

  triciaannemitchell · Member · Jan 5, 2018 at 11:28 am

  • Copy link

  Thanks for trying, @thesacredpath!

  I’d rather not delete any of my headings (About, Contact, etc.) from the menu bar, but I’d love to restrict them to one line. Can you think of any work-arounds?

• 

  triciaannemitchell · Member · Jan 5, 2018 at 3:52 pm

  • Copy link

  I think my husband and I might have found a work-around.

  We created a custom link under the menu structure with the word “MENU”. Underneath that, we nestled the various menu headings (pages).

  Do you know how I can get the MENU font (header on the far right) to be the same size and style as my blog title, which is on the far left?

• 

  thesacredpath · Member · Jan 5, 2018 at 8:23 pm

  • Copy link

  That’s a great solution you and your husband came up with. I’ll keep that in mind for this situation in the future.

  On the menu text, what we can do is to specifically target that menu item by menu item id and make it look like the site title. I’ve also set the bottom margin on that menu item to 0 as the change in menu font size made the header area quite tall.

  .main-navigation .menu-item-80651 > a {
    color: #fff;
    font-size: 20px;
    margin-bottom: 0;
  }

• 

  triciaannemitchell · Member · Jan 6, 2018 at 9:01 am

  • Copy link

  That works perfectly! Thank you.

• 

  thesacredpath · Member · Jan 6, 2018 at 5:49 pm

  • Copy link

  Hooray and you are welcome!