Home>Support>Changing the height of the header widget menu

Changing the height of the header widget menu

By Brian Frolo, 11 years ago. Last reply by Andrew Misplon, 11 years ago.
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

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 11 years, 27 days ago Andrew Misplon
    Hi, I Work Here

    Hi Brian

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

  2. 11 years, 27 days ago Brian Frolo

    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. 11 years, 27 days ago Andrew Misplon
    Hi, I Work Here

    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. 11 years, 27 days ago Andrew Misplon
    Hi, I Work Here

    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. 11 years, 27 days ago Brian Frolo

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

  6. 11 years, 27 days ago Brian Frolo

    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. 11 years, 26 days ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More