[snickercraze]

Hi,

1. How can I move the hamburger menu to the top right as part of the sticky header? It’s currently on the bottom right on a mobile device.
2. How do you add the call to action button on the home page? I see the buttons for the Scapeshot light theme but it wasn’t on the free theme demo.
3. Is it possible for the sticky header to load only after scrolling starts? I want to keep the landing page as clean as possible.

Thank you so much for helping! Happy holidays

[Skandha]

@snickercraze: Hello there,

Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* To have the hamburger menu on top right on mobile devices */
@media screen and (max-width: 767px) {
.fullscreen-menu-toggle-wrapper {
bottom: unset;
top: 35px;
}
}

/* To have the sticky header visible only after scroll */

@media screen and (min-width: 1024px) {
.site-header {
display: none;
}
.site-header.catchSticky {
display: block !important;
}
}

To have the call to action button on the Header Image on homepage

Go to => Appearance => Customize => Header Media => Add to the Header Media Url and Header Media Url Text and Publish.

Let me know if this works out!

Kind Regards,

Skandha

[snickercraze]

1) the hamburger menu is on the top right now but the text is overlapping with the site title and tagline. It also does not behave like the rest of the sticky masthead which disappears when you scroll up

2) the code didn’t work. Sorry I meant to say sticky masthead instead of header (used sticky menu plugin). This is the website if it helps: metagroupre.com

3) is there a way to adjust the location of the button? It’s overlapping the header image

thank you so much!

[snickercraze]

1) hamburger menu overlaps with expanded menu site title and tag line as well

[Skandha]

@snickercraze: Hello there,

Can you please add the add I provided you above in the the Additional CSS section and also add the Header Media Button so that I can further assist you to change their position on your site.

Kind Regards,

Skandha

[snickercraze]

@skandha, I’ve put it back and added the call to action button as well. Thank you!

[Skandha]

@snickercraze: Hello there,

Please replace the CSS Code I provided you above with the following Code.

/* To have the hamburger menu on top right on mobile devices */
@media screen and (max-width: 767px) {
.navigation-full-screen .site-branding {
margin: unset;
}
.fullscreen-menu-toggle-wrapper {
bottom: unset;
top: 20px;
right: 10px;
}
.fullscreen-menu-inside-wrapper > .site-branding {
justify-content: unset;
}
}

/* To have the sticky header visible only after scroll */
@media screen and (min-width: 1024px) {
.site-header {
visibility: hidden;
}
.site-header.catchSticky {
visibility: visible;
}
}

/* To change the position of the Header Media Button */
@media screen and (min-width: 767px) {
.custom-header-content-wrapper {
text-align: right;
}
}

@media screen and (max-width: 767px) {
.custom-header-content {
position: absolute;
bottom: -50px;
}
.custom-header-content-wrapper {
text-align: center;
max-width: unset;
}
}

Let me know if this works out!

Kind Regards,

Skandha

[snickercraze]

It worked, thank you @skandha!

To have the sticky header visible only after scroll — how do I do that for mobile/tablet as well? That code only worked for desktop.

Thanks!

[Skandha]

@snickercraze: Hello there,
For that add the following CSS Code.

@media screen and (max-width: 767px) {
.site-header {
visibility: hidden;
}
.site-header.mob-catchSticky {
visibility: visible;
}
}

Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts