lodestar main menu and sticky menu problem

Hello there,

Many thanks for reaching out and providing a detailed explanation.

Just to check – is the goal to get a sticky header that works with mobile and desktop?

If yes, this may be possible with CSS. Are you able to deactivate any plugins that are causing the header to be sticky please.

This will help to create CSS that would work with the theme natively.

Many thanks in advance.

Just to check – is the goal to get a sticky header that works with mobile and desktop?
> Yes!

I have deactivated the plugin… May I get some help – what is the next step? ??

Hi there,

Because the Lodestar theme was not intended to have a persistent “sticky menu” adding one after the fact can be very challenging.

We’ve put our heads together and come up with this CSS code you can try:

.header-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1999;
}
.admin-bar .header-top {
    top: 32px;
}
.site-header-fixed.header-top {
    animation: unset;
    transition: unset;
}
@media (max-width: 768px) {
    #masthead {
        padding-top:110px;
    }
}

In our testing it seems to work fine, but if you have any issues with it at all, it may be time to hire an outside web designer to help you with the CSS, as this is quickly falling outside of the scope of what we can support.

Hope this helps!

Hi Leone and Jerry! Wow! Thanks so much!
Yes… if only the theme had that option, which is really important for today’s context with so many e commerce and businesses using WP themes!

I have used the code here: https://staging12.meide.sg

It does work quite good…. but if you see the mobile view… it presents a big problem! the menu list is incomplete and cut off.. and no way to scroll. Why is that so? Some missing part of the CSS?

Many thanks so far for your awesome advice!

• This reply was modified 4 years ago by meideserve.

Hello there,

Many thanks for getting back on this.

It does work quite good…. but if you see the mobile view… it presents a big problem! the menu list is incomplete and cut off.. and no way to scroll. Why is that so? Some missing part of the CSS?

Ah I see what you mean, you might want to try adding this code as well.

@media (max-width: 768px) {

.menu-menu-1-container {
    height: 700px;
}

.main-navigation.toggled ul {
    display: block;
    overflow-y: scroll;
    position: relative;
    height: 100%;
}
}

I hope this helps.

Many thanks! I added the code. But things seem quite weird (weirder, actually) now… you may see the outcome at https://staging12.meide.sg

Hello there,

Ah – I see exactly what you mean!

Please remove (previous code):

@media (max-width: 768px) {

.menu-menu-1-container {
    height: 700px;
}

.main-navigation.toggled ul {
    display: block;
    overflow-y: scroll;
    position: relative;
    height: 100%;
}
}

And replace with:

@media (max-width: 768px) {
.main-navigation.toggled ul {
    display: block;
    overflow-y: scroll;
    position: relative;
    max-height: 685px;
}
}

It looks like .menu-menu-1-container was unnecessary there.

Can you confirm that this has the desired effect please.

Many thanks in advance.

Thanks Adam!
Added and u can see the effect at
staging12.meide.sg!

Seems like still a problem though…

In any case… I did solve the problem this afternoon too with help from another great guy, but at the main website:
https://meide.sg

you can see the customised CSS code there. Thanks so much for your help so far nonetheless.