Scrolling OFFSET not working on first Click

Hi again, one more problem. With this plugin, at the mobile view, when I clicked on the link at the menu, the stay on its place and the text will be hidden. Can you help me? Thank you very much!

@kenmetro

For the mobile menu colors you can use the same method as in desktop:

.resp_full_width_menu .site-header .menu_wrapper .menu li.current-menu-item>a._mPS2id-h,
.resp_full_width_menu .site-header .menu_wrapper .menu li.current_page_item>a._mPS2id-h{
    color: #333;
    background: white;
}

.resp_full_width_menu .site-header .menu_wrapper .menu li.current_page_item>a._mPS2id-h:hover{
    background-color: #F15A23;
    color: #ffffff;
}

Since the rules are the same for desktop and mobile and only the CSS selectors change, you could combine them like:

/* desktop */
.main-navigation ul li.menu-item-type-custom.current_page_item a._mPS2id-h,
.main-navigation ul li.menu-item-type-custom.current-menu-item a._mPS2id-h,
/* mobile */
.resp_full_width_menu .site-header .menu_wrapper .menu li.current-menu-item>a._mPS2id-h,
.resp_full_width_menu .site-header .menu_wrapper .menu li.current_page_item>a._mPS2id-h{
    color: #333;
    background: white;
}

/* desktop */
.main-navigation ul li.menu-item-type-custom.current_page_item a._mPS2id-h:hover,
.main-navigation ul li.menu-item-type-custom.current-menu-item a._mPS2id-h:hover,
/* mobile */
.resp_full_width_menu .site-header .menu_wrapper .menu li.current_page_item>a._mPS2id-h:hover{
    color: white;
    background: #F15A23;
}

For the mobile menu staying open I can’t really help as this is another script/plugin. Maybe there’s a setting to change this functionality in your theme/menu options?

Hello, really thanks a lot for your help. Everything goes, only I have problem with that opened menu. I tried it with css, but it doesn’t work. I really don’t know why.
I used that code for onclick:

.resp_full_width_menu .site-header .menu_wrapper .menu li.current_page_item>a._mPS2id-h:onclick {
visibility: hidden;
}
.resp_full_width_menu .site-header .menu_wrapper .menu li.current-menu-item>a._mPS2id-h,
.resp_full_width_menu .site-header .menu_wrapper .menu li.current_page_item>a._mPS2id-h: onclick {
visibility: hidden;
}

Have you got idea what do I wrong?

:onclick is not a CSS rule. Click events can only be used in javascript (you cannot do it via CSS alone).
You should ask the menu script developer if it supports a function/way to close the menu when a link is clicked, otherwise you’d have to write/develop some custom jquery script to do it.

Ok, thank you very much for the help!

Hi there! I’m having the same issue with the first menu item not scrolling to the correct spot. I’ve tried to find the correct CSS selector for my sticky header but all it does is push the sticky header 120px off of the top of the page as you scroll. Any help is much appreciated!

https://76ersofsaline.com/

Amanda

@amandaobriendesign

In your CSS you need to target the #main element which is after the sticky header (.sticky). The way your theme works, it’s better to add a top padding (not margin) equal to your sticky header height (120px) on the #main element:

#masthead.sticky ~ #main{
    padding-top: 120px;
}

Since your theme is responsive and header’s position does not stay fixed in smaller viewport sizes, it’s better to apply a second media rule to avoid conflicts. So the CSS you need to apply is:

#masthead.sticky ~ #main{
    padding-top: 120px;
}

@media screen and (max-width: 752px) {
    #masthead.sticky ~ #main{
        padding-top: 0;
    }
}

That worked. thank you so much!