Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
