Sydney Thema Sticky Menu is missing in Mobile and Tablet Mode

Hi,

since one of the last updates of the sydney theme i miss the sticky menu on the top of the window for some device types. The sticky menu works on the desktop correctly.

But it’s not sticky on mobile and tablet devices. The Sticky Option in the Layout Option is activate.

You can see it here: www.weltenbummler-unterwegs.de

Hello @chrisk87,

Sydney mobile menu bar isn’t sticky on mobile devices, it’s normal.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi,

thank you for the answer. Is there a possibilty to make it sticky for mobile and tablet devices?

Hello @chrisk87,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

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

Kind Regards, Roman.

Hi,

i add your css directly to the style.css of the child theme. But it doesn’t work.

I try instead:

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

That makes the complete header sticky. But now i have on the mobile version a sticky menu+logo. Can i remove the logo from the sticky menu for mobile? Cause now my sticky menu+logo use 1/3 of the complete display. Thats too much.

Hello @chrisk87,

It might be the reason why it’s not sticky on mobile devices by default :slight_smile:

Please try this CSS code:

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

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

Kind Regards, Roman.

Hi,

thank you. Now the menu looks better and is smaller :slight_smile:

But i have two additional questions for the menu in the header

A) The Menu is overlapping the pictures of my slider (header) on the mobile view.
How can i deactivate that the menu is overlapping the picutres below?
I try to activate the checkbox “Deactivate overlapping?” in the Customizer Options in Header Media. But nothing happens.

Can i stopp the overlapping via css for the mobile version?
(I use the verion Option Slider mobile behavior: Responsive)

B) On tablets the the right foldable menu icon is on the top of the display. So it’s not vertical centered (like the complete menu on the desktop version).
How can i adjust it and center the menu icon on tablets vertical (the same distance above and below the icon in the black menu)

Hi,

and i have in addition to question A) and B) of the last post a new last point C)

Can i choose a different header background colour of the startpage/main page and all other pages?

Header on all others Pages
background-color: rgba(0,0,0,0.9);

Header on Startpage
background-color: transparent;

Thank you for your help and great support.

Hello @chrisk87,

Please create a separate topic for each of the issues above in order to make it easier to help you.

Kind Regards, Roman.

Hi,

i create separate topics for that. Thank you.

I have here only a question to your provided css for the minimized sticky mobile menu. That belongs to these topic.

Through your css i minimize the sticky mobile menu header and remove the logo correctly.
Can i set a exception only for the not floating main home/startpage?

So the complete stciky menu is visible with logo on the startpage. If i start scrolling or go to a subpage i have the minimized menu header.

I try following code but i think somewhere is an error:

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

    .btn-menu {
        margin-top: -20px;
    }
  .home.site-header.sticky .site-logo {
       display: block !important;
   }

   .home.site-header.sticky .btn-menu {
       margin-top: 0px !important;
   }
}

Hello @chrisk87,

Please try to use this CSS code instead of previous:

#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;
    }
}

Kind Regards, Roman.

Hi Roman

I see this post is dealing with the exact issue I need to resolve on my site, when viewing on a mobile (iPhone 6s)… http://merwevilleaccommodation.com

"Can I set an exception only for the not floating main home/startpage?

So the complete sticky menu is visible with logo on the startpage. If I start scrolling or go to a subpage I have the minimized menu header."

#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;
}

}

When i use the code above it does everything that it’s meant to except on the startpage the logo and menu are covering/hiding the slider? It looks like the slider is anchoring on the minimized menu header?

Thanks
Kb

Also, why cant i change the colour of the header menu background to #382c27 (brown). It is still displaying as the darker colour (Black)?

Thx, Kb

Hello, please create a separate topic for each of your issues to keep forum in good order and make it easier to help you.

Kind Regards, Roman.