Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi,
You can see where I’m at http://pearne.wpengine.com/about/ . That semi-circular background image wants to be stuck to the top edge of the browser. But I can’t swing the CSS. Any ideas are already appreciated.
Thanks!
Brian
Hi Brian
What is the desired end result here, how do you want it to look?
Good morning Andrew, thank you.
Here’s a link to the page comp https://www.dropbox.com/s/hzjcjreepvwhsmk/pearne-international-services.jpg .
We want the semi-circular background image stuck to the top of the browser window for both :hover and page_current_item. We’re just a little vague on how to make the height of the menu container match the height of the header.
Thanks in advance for your help!
Brian
Ok shooting from the hip I’d say you need to:
Remove all header sidebar padding and set a height for it:
header#masthead hgroup #header-sidebar { height: 200px; padding-top: 0 !important; padding-bottom: 0 !important; }Set a height for the menu:
#header-sidebar .widget_nav_menu ul.menu { height: 200px; }Then try rather applying your image to the list item not the link:
#header-sidebar #menu-header-menu .current_page_item { background: url(‘http://pearne.wpengine.com/wp-content/images/nav-hover.png’) no-repeat top center transparent; }Reason being we need to add padding to the link to get it off the top of the page:
#header-sidebar .widget_nav_menu ul.menu > li > a { padding-top: 100px; }So all random numbers there but I think this is one way of doing it.
You’d need to run some testing and see if this handles smaller screens and other browsers etc. The idea is to try point you in the right direction but it needs some work.
Cool, thanks for the quick replay. Let’s give it a go.
Bingo http://pearne.wpengine.com/contact/ . Works in the latest versions of FF, IE, Safari and Chrome. For mobile I just set background-image: none; and tweaked the padding here and there.
Thanks a million!
Super, glad we could help. All the best.