Change from drop down menu to permanent horizontal menu in header area

  • Author
    Posts
  • #126760

    How can I change the dropdown vertical menu to a horizontal one that stays below the header logo?

    The blog I need help with is bibikgourmand.wordpress.com.

    #126852

    lelandf
    Theme Author

    Hmm, interesting customization so far! So the theme does not support that out of the box, but with some Custom CSS it is possible.

    This should get you started:

    body .menu-toggle {
    	display: none;
    }
    
    body #primary-menu {
    	display: block;
    	text-align: center;
    }
    
    body .main-navigation li {
    	display: inline-block;
    }
    
    body .main-navigation > :not(.widget-area) a {
    	border-left: 0 !important;
    	display: inline-block;
    	padding: 12px !important;
    }
    
    body .main-navigation > :not(.widget-area) li::after {
    	display: none;
    }

    One note: try not to use submenu items for now because it will probably look screwed up. Try to keep all menu items top-level, as you have now, for best results.

    Regards,
    Leland

    P.S. (This is not directed to the original poster, but rather other Novara users peering into this thread) if you want something like this, please make a separate thread and I can help. This site already had other customizations in place that made the above code work well. It will not work so well on a brand new Novara site.

    #126854

    Hi Leland,

    Thank you for your prompt response.

    However when I tried inputting the code it only worked temporarily on the home page. And after I clicked one of the menu options and it took me to the linked page, the menu reverted to the dropdown menu.

    It stayed as the dropdown menu even after I returned to the home page via clicking the logo.

    #126855

    lelandf
    Theme Author

    Hi there,

    Are you sure the Custom CSS was saved? It sounds like after pasting the Custom CSS in, navigating to another page (before saving) wiped it away.

    Can you try again and make sure the “Publish” button (in the top right corner of the Customizer panel) is pressed before navigating to any other page on the site?

    If that doesn’t help, I’ll go ahead and tag WordPress.com support to see what their thoughts are.

    Regards,
    Leland

    #126856

    Hi Leland,

    It works! Thank you! It looks great!

    #126857

    Oh dear, I just checked it, the posts are no longer centralised, what should I do?

    #126858

    lelandf
    Theme Author

    Are you sure you didn’t delete something else when you pasted in the above code?

    You’ll notice that even if you delete all the code I provided, the posts are still not centered. It wouldn’t have any effect on the content area.

    I’m not exactly sure how you did it before, but adding this line of Custom CSS will fix it:

    .content-footer-wrap { width: 100% !important; }

    #126859

    lelandf
    Theme Author

    Oh, I see what the problem is in your Custom CSS, by the way.

    .content-footer-wrap {
     width:100%;
     order:2;
     float:right;
     padding-top:.5%;
     width:66%
    }

    Notice the two competing “width” properties? The “width: 66%” part should be removed. Since it comes later in the code, it takes precedence.

    Again, I’m not sure what exactly happened in between my first response and now because I didn’t take note of your Custom CSS before, but that is the issue.

    #126860

    Okay, thank you once again!

The topic ‘Change from drop down menu to permanent horizontal menu in header area’ is closed to new replies.