Move Menu below Navbar Box


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 27-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.*

This code does work in 3.3. But not one of my favourites! I prefer to remove the Navbar Box and make adjustments. See this Snippet.

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

 


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



13 thoughts on “Move Menu below Navbar Box

  • inisheer

    I need to get rid of one of the navbar-inner bars and have gone totally crazy trying to figure out how to do it. I’ve hilighted them in red – want to get rid of the top one. Ilustrations show my site and the settings in menu panel. Help!

  • Michael Stoch

    how can i make a menu stick to the bottom of the box rather then have to make padding from the top? vertical align bottom

  • ozkaptan

    I can not seem to get anything on the navbar menu. I have an empty navbar and can not add anything. Please assist,

  • Angelo

    Hi, i put this code but, if i put a top: 40px and i use a sticky menu, when i scroll the site down and the sticky menu modify the menu position putting it outside the opaque bar… can you help me?

    Thanks
    ANgelo

  • Sugaboss

    Hi everyone, thank you for your knowledge sharing … I really appreciate that

    I got a little problem when applying the CSS code … The menu moves as intended but the reference point of the dropdown (i.e sub menu) doesn’t not move. The drop down are left in the original position. Please suggest me a solution. FYI, I made a significant modification for the header area, I change it from the height ;max 45px into 150px.

  • stardrive

    Many Thanks, Nicolas.
    I will go through the documentation and make a research as you suggested.
    If need be, I will then post a thread in the forum

    Best Regards,

  • stardrive

    I have an issue. Please, does the above code snippet make the menu area to be below and separate from the header area such that i can apply different backgrounds to the header and menu?
    What i want to achieve is for the header area (logo, title, tagline, social icons) to occupy the topmost horizontal section; and the menu area to be just below the header area, and independent of the header, so that i can style the header area and menu area differently.
    Please, how do i achieve this?

  • stardrive

    Please, does the above code snippet make the menu area to be below and separate from the header area such that i can apply different backgrounds to the header and menu?
    What i want to achieve is for the header area (logo, title, tagline, social icons) to occupy the topmost horizontal section; and the menu area to be just below the header area, and independent of the header, so that i can style the header area and menu area differently.
    Please, how do i achieve this?

  • thomas

    Hello and thanks for this snippet.
    My menu is now below the navbar and i can change the position relatively to the navbar with for instance:
    .navbar .nav > li > a {
    position: relative;
    top: 80px;
    left: 350px;
    }
    Nevertheless, when I change the size of my navigator window, the menu bar does not move accordingly.
    Is there a way to align the menu bar to the right and to the bottom whatever the size of the window? I would like to place it just on top of the slider on the right.
    Thanks!

  • Giorgio Riccardi

    Hi Dave,
    I’ve noticed that on the responsive menu those 10px are leaving a not nice gap. Here is how I solved it:

    • Dave Bardell Post author

      Most of these Snippets are tested standalone, so it is possible that when added to other CSS code they don’t work quite as intended. I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.

      Thanks for using Customizr.

Comments are closed.