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

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

    (@anevins)


    Forum moderator


    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.

    Adam Blythe

    (@adsleeblythe)


    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)


    Forum moderator


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

    Adam Blythe

    (@adsleeblythe)


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

    Moderator Andrew Nevins

    (@anevins)


    Forum moderator


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

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

    Adam Blythe

    (@adsleeblythe)


    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)


    Forum moderator


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

    Adam Blythe

    (@adsleeblythe)


    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)


    Forum moderator


    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.