Styling Primary Navigation in Origin Theme

  • Author
    Posts
  • #1384857

    artwip
    Member

    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.

    #1385029

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

The topic ‘Styling Primary Navigation in Origin Theme’ is closed to new replies.