Need help? Check out our Support site, then


Styling Primary Navigation in Origin Theme

  1. Hi All
    I'm wanting to move the primary navigation in the Origin theme to sit "over" the logo/header image. As you can see the logo is square and sits to the left, and I want to move the navigation up so it's centred to the logo but sitting to the right. I'd also like to increase the font size of the navigation. I'm using the "custom design tool". This is the first blog I've customised so any help is appreciated!

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

  2. thesacredpath
    Staff

    Hi, To move the menu up above the logo, we have to use position: absolute and that makes the menu behave a little differently when the browser window is resized, or someone visits the site on a smartphone or another device with a narrow screen. Give the following a try and see if this is what you want. Make sure and narrow and widen your browser window to see what happens.

    Add the following at Appearance > Custom Design > CSS tab. Delete the informational text and paste in the following.

    img#header-image {
        margin-top: 70px;
    }
    
    .wrap {
        position: relative;
    }
    
    #menu-primary {
        float: left;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    
    #menu-primary .menu {
        float: left;
        width: 100%;
    }
    
    #menu-primary li a {
        margin-left: 2em;
        margin-right: 1.5em;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic