Support » Themes and Templates » Vertical primary navigation menu Twenty Ten

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Andrew Nevins

    (@anevins)

    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.

    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

    Moderator Andrew Nevins

    (@anevins)

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

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

    Moderator Andrew Nevins

    (@anevins)

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

    #access .menu-header ul li {
     float: none;
    }

    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…

    Moderator Andrew Nevins

    (@anevins)

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

    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?

    Moderator Andrew Nevins

    (@anevins)

    Sure.

    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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Vertical primary navigation menu Twenty Ten’ is closed to new replies.