Sticky menu on desktop vs mobile/tablet

Hi

I copied some code that was provided by Roman in a previous post which is now active on my site in Appearance_Customisze_Additional CSS.

Like with the previous post, I want the complete sticky menu (with logo) to appear when viewing on a desktop. When viewing on a mobile, because of the small screen size I want the complete sticky menu (with logo) only to be visible on the start page/view. If I start scrolling or go to a subpage I want a minimized menu header (no logo) as can be seen on my website.

Here is Romans code:

#masthead.site-header.fixed {
position: fixed !important;
background-color: rgba(0,0,0,0.9);
}

@media (max-width: 767px) {
.site-logo {
display: none;
}

.btn-menu {
    margin-top: -20px;
}

body.home #masthead:not(.float-header) .site-logo {
    display: inline;
}

body.home #masthead:not(.float-header) .btn-menu {
    margin-top: 15px;
}
}

Issues I’m experiencing:

  1. I think the code is interfering with the sticky menu in desktop view. The Sydney theme homepage in desktop view has lovely transparent menu which is now switching to the Black sticky menu once the page loads?

  2. When on mobile view on the startpage, the logo and menu are covering/hiding the slider? It looks like the slider is anchoring on the minimized menu header?

  3. I cant seem to change the colour (In Appearance_Customize_Colours_Header) of the header menu background to #382c27 (brown). It shows that the change has been made but when you load the page, the brown colour disappears and is replaced by the darker (Black) colour?

  4. Lastly, could I hide the Slider, Call to action button “Click here to begin” button only on Mobile? it serves no use on such a small screen.

Thanks
Kb

Hello,

  1. Try to replace that code with this:
#masthead.site-header.fixed {
    position: fixed !important;
}

@media (max-width: 767px) {
    body.home .site-logo {
        display: none ;
    }

    body.home .btn-menu {
        margin-top: -20px;
    }
}
  1. Please create a separate topic for your CTA issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.

OK. I wasn’t sure if i must replace all the original code with the new code you provided? I tried this but lost the logo on the startpage on mobile view.

I then replaced the first section of original code with the new code you provided and left the remaining code as is.

From my list of issues… “1” has been resolved… “2” is still not working (See how the slider image and text is hiding behind the header in the screenshots attached), “3” has been resolved and I will resubmit "4’ in a new post as requested.

Thanks so far

Okay, let’s try with !important keyword:

#masthead.site-header.fixed {
    position: fixed !important;
}

@media (max-width: 767px) {
    body.home .site-logo {
        display: none !important;
    }

    body.home .btn-menu {
        margin-top: -20px !important;
    }
}

Kind Regards, Roman.

Hi Roman

I used your new code and have now lost the logo on the startpage in mobile view.

This is the code I currently have in my Additional CSS (Please check that it’s correct):

/* Make menu sticky for mobile */
#masthead.site-header.fixed {
position: fixed !important;
}

@media (max-width: 767px) {
body.home .site-logo {
display: none !important;
}

body.home .btn-menu {
    margin-top: -20px !important;
}

}
.btn-menu {
margin-top: -20px;
}

body.home #masthead:not(.float-header) .site-logo {
display: inline;
}

body.home #masthead:not(.float-header) .btn-menu {
margin-top: 15px;
}

Would it help for you to have access to the backend of my site?

Karl

Hello Karl,

It looks like this issue requires close inspection, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.

I was looking for something similar, I had the same issue as you, Menu hiding the slider on mobile if sticked but in this thread that problem gets solved with .site.margin-tom on the CSS I had to increase it from 140px as suggested as an example to 180px Take a look How can I set the mobile menu to "Sticky" The sticky menu on mobile works great on portrait but on landscape
there is an issue because the menu take to much space so now I need to figure out how to be able to see the desktop menu on mobiles when on Landscape orientation. It seems that one is quite thinner since it has the logo at one side and the menu at the other side. Maybe I will need to adjust the menu div high
Any suggestion Roman?

Hello,

I don’t think that there is an easy way to make sticky menu work well on mobile devices in landscape orientation. In this case I would suggest to keep default theme behavior because it works well in most cases.

Kind Regards, Roman.