Move Navbar Under Header

  • Author
  • #1082303


    To further explain. I would like my navbar to appear under the header. And I would like to do this with CSS. How do I do it?

    I’m using the theme Modularity Lite.

    My Website is Here:

    Thank You.

    The blog I need help with is


    This might give a start. I moved it left because it seemed to fit better there. You might need to play with some of the numbers a bit.

    #top {
    position: relative;
    .main-nav {position: absolute; left: 10px;
    bottom: -280px;
    #sidebar {
    margin-top: 10px;


    Thanks! This helped a lot! I have a lot more flexibility over the placement of my nav bar now. However, the only problem I have left is that a black line on my page is running through the navbar right where it says “music.” Do you see what I’m talking about. I would like to figure out how to move that black line down, if not just simply get rid of it.


    I like where you located the nav bar. The black line doesn’t show up on my ipad right now. Will check when on my notebook later … Or did you cure it?



    Thanks so much for helping me. Part of the problem is that I don’t know where to go to look at the original Modularity Lite CSS – because my custom CSS is not giving me the option of doing that anymore.

    The black line I’m talking about is the line that is to the left of my side bar. It is a vertical line that runs up and down. It runs straight into where I put my nav bar.

    Thanks again. Your help means a lot to me.



    Actually…I think I thought of a solution, let me mess with this.


    Super. I’ve had one thought but haven’t experimented with it. You can find your original CSS file HERE. I also find it helpful to view the page source that gives the html and shows the selectors in play. There are also web develop plugins that allow you to inspect an element to see what tags are used on it.

    Let me know if you need further help … And if you get a solution, feel free to share it so that others may learn.



    Thank you! I ended up with a solution. I simply made the navbar a part of the header and it doesn’t look half bad.


    Super solution! Looks great.

The topic ‘Move Navbar Under Header’ is closed to new replies.