Tweaking header menu position with css

  • Resolved Itam

    (@itamvanteeseling)


    10 years, 9 months ago

    Hi,

    I have been playing with some css (complete noob here) to try to fix the position of the header of my Edin-styled website: http://www.charpentier-dutchlanguagetraining.nl

    I managed to get it fixed with the following CSS:

    .site-header {
    background-color: rgba(255,255,255,0.93);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
    }

    body.admin-bar .site-header {
    top:
    28px;
    }

    body {
    padding-top: 150px;
    }

    It works fine, but the problem is that, because I want to use the “default” primary Edin menu, once that menu pops up after clicking on the menu icon, the menu also stays fixed.

    With a big screen it is no problem, but on an iphone or also an ipad, the bottom of the menu is not reachable anymore because I can’t scroll the menu.

    Is there a way to fix the position of the header, but after clicking on the menu Icon making the menu (which is inside the header) unfixed again? And of course, after clicking on a menu item, inside the menu, make the header fixed again?

    I hope I don’t sound too complicated, I have no idea how to explain it in another way.

    Thanks in advance,

    Itam.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Kathryn Presner

    (@zoonini)

    10 years, 9 months ago

    Hi Itam, what about just restricting the fixed header to larger screens, by putting it in a media query? That would solve the issue in a much simpler way.

    Something like:

    @media screen and (min-width: 1230px) {

/* Add your custom CSS here */

}

    I also just wanted to make sure you aren’t editing the original theme files, otherwise your changes will be overwritten whenever the theme is updated.

    Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    Thread Starter Itam

    (@itamvanteeseling)

    10 years, 9 months ago

    Hi Kathryn,

    thank you so much. I tried it and it worked.
    However, I changed my mind and changed it back to default. Still good to know how to do it though 😉

    Again thank you!!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Tweaking header menu position with css’ is closed to new replies.