Sticky menu | PenciDesign Support

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (max-width: 767px) {
    #navigation .container {
        display: flex;
          justify-content: space-between;
    }
    #navigation .container #top-search {
        margin-left: 0;
    }
}
.featured-area {
    margin-top: -40px;
}
#navigation.header-6 #logo img {
    padding: 18px 0;
}
.is-sticky #navigation {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Regards,
PenciDesign.

Lordexeros replied

3 years ago

Customer Reply

Hello,

Thanks a lot for your help.
I tried to mix your css and did some modification but it still does not work properly. I would still need help for 4 things.

(1) The mobile menu is quite good. Just that the logo is still not 100% in the middle of my screen. How can I have it in the middle?

(2) On the PC, it's still not good, I cannot have a smooth transition between the normal and the sticky menu. Most probably because the height of the two menus are not the same (normal vs sticky). How could I have it sticky but without modification between the normal version and the sticky version? As it is in https://www.healthline.com/
On this website, when you scroll down, there is no modification on the sticky menu, it remains the same as when you don't scroll down. On my website it's not the case and I don't know how to resolve the issue.

(3) how can I have the logo vertically aligned on the desktop version (it's not in the middle). At least to have it vertically aligned to the menu.

(4) One last question, how can I get rid of the shadow/line bellow the menu bar/container?

Thanks a lot for your help.
Kind regards,

David Gotti

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

#navigation.header-6 .menu {
    float: left;
}
@media only screen and (max-width: 960px) {
    #navigation.header-6 #logo img {
        max-height: 58px;
        padding: 10px 0;
    }
}

Regards,
PenciDesign.

Lordexeros started the conversation

3 years ago

Conversation Start

Hello,

I would need some help with my sticky menu.
On a PC, how could I get rid of the white space below the logo/menu? I would like to have a sticky menu which does not change at all. It just stays the same whether you scroll or not.

The same for the mobile version. When I scroll, the menu stays but it does kind of a zoom on the logo and make it bigger. How is it possible to have it stay the same. An example of what I would like to do can be found on healthine.com

A very simple menu, which does not change when scrolling down.

And, one more question, how can I have the logo being smaller on mobile? because I cannot get it smaller.

Thanks a lot for your help.

Kind regards,
David Gotti