WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Vertical primary navigation menu Twenty Ten (11 posts)

  1. adsleeblythe
    Member
    Posted 1 year ago #

    Hi,

    I would like to change my current horizontal primary navigation menu to a vertical one. I would also like to reposition it so it sits to the right my site-title.

    How would I achieve this?

    I am using a child theme of Twenty Ten.

    Here is a screen shot of what I would like

    Here is a link to my website

    Your help is much appreciated. Thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try;

    #header {
     position: relative;
    }
    
    #access {
     width: 20%;
     position: absolute;
     top: -150px;
     right: 200px;
    }
    
    #access .menu-header ul {
     width: 19%;
    }
    
    #access .menu-header ul li {
     float: none;
    }

    If you don't want to take such drastic positioning values, you need to move your menu further up in your header.php file.

  3. adsleeblythe
    Member
    Posted 1 year ago #

    Thanks @Andrew Nevins

    unfortunately it didn't work. The code you suggested seems to be conflicting with my large image background and header-logo (site-title).

    Could you tell me where I would need to move the menu to in header.php?

    Thanks again

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    I think there's something wrong with the method you're applying the CSS to the webpage. I can still see a horizontal navigation.

  5. adsleeblythe
    Member
    Posted 1 year ago #

    Sorry I reverted back...it should be good to view now

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Oops forgot to mention, I updated the code with this;

    #access .menu-header ul li {
     float: none;
    }
  7. adsleeblythe
    Member
    Posted 1 year ago #

    That's brilliant thank you.

    One problem now though, my #header-logo img (adamleeblythe.co.uk) has been pushed down and sits just above my first post! it should be sitting in front of the brown tape on the body background...

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    In that case, try this code (overwrite entire suggested code so far);

    #access {
     width: 20%;
     top: 12px;
     right: 350px;
     position: absolute;
    }
    
    #access .menu-header ul {
     width: 19%;
    }
    
    #access .menu-header ul li {
     float: none;
    }
  9. adsleeblythe
    Member
    Posted 1 year ago #

    Again, Thank you,

    Your code didn't work exactly but it certainly helped me!

    I have modified it slightly and it seems to have done the trick

    #access {
     width: 180px;
     top: 12px;
     position: absolute;
     padding: 0 0 0 550px;
     background-color: transparent;
    }
    #access .menu-header {
    	background-color: #000;
    	width: 180px;
    }
    #access .menu-header ul {
     width: 180px;
    }
    #access .menu-header ul li {
     float: none;
    }

    Does this look OK?

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sure.

  11. adsleeblythe
    Member
    Posted 1 year ago #

    I have modified my menu in the twenty ten (child) theme using simple hover and positioning properties.

    In case anyone else would like to know here is my CSS code.

    The following URLs were also very helpful:

    http://webdesignerwall.com/tutorials/advanced-css-menu
    http://www.noobcube.com/tutorials/html-css/create-an-advanced-css-menu-using-the-hover-and-position-properties-/

    Thanks also to @Andrew Nevins

Topic Closed

This topic has been closed to new replies.

About this Topic