Move Navbar Under Header

  • Author
    Posts
  • #1082303

    metalgaia
    Member

    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: http://metalgaia.wordpress.com/

    Thank You.

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

    #1082645

    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;
    }
    #1082647

    metalgaia
    Member

    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.

    #1082648

    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?

    #1082649

    metalgaia
    Member

    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.

    #1082650

    metalgaia
    Member

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

    #1082651

    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.

    #1082652

    metalgaia
    Member

    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.

    #1082653

    Super solution! Looks great.

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