This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Changing the height of the header widget menu

Resolved 7 replies premiumthemetheme-vantage
Brian Frolo
11 years ago · Last reply by Andrew Misplon 11 years ago

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

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 11 years, 8 months ago

    Hi Brian

    What is the desired end result here, how do you want it to look?

  2. Brian Frolo 11 years, 8 months ago

    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

  3. Andrew Misplon Staff 11 years, 8 months ago

    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.

  4. Andrew Misplon Staff 11 years, 8 months ago

    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.

  5. Brian Frolo 11 years, 8 months ago

    Cool, thanks for the quick replay. Let’s give it a go.

  6. Brian Frolo 11 years, 8 months ago

    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!

  7. Andrew Misplon Staff 11 years, 8 months ago

    Super, glad we could help. All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread