Hey @wpjakarta
Try adding this:
@media screen and (max-width: 767px) {
#site-navigation {
text-align: center;
clear: both;
}
#site-navigation button {
float: none;
margin-top: 15px;
}
#site-navigation .handheld-navigation {
text-align: left;
}
}
hello @senff
thank for your help, actually your code is work
but i forget to explain before that i adding sticky class to main navigation when it scrolled down. and the button will be centered when sticky already active
I’m sorry, I’m not sure what you mean exactly. The code I gave you earlier should make the button centered also when you scroll down and the menu becomes sticky.
Hello,
Sory for slow replying your message
I mean before it scrolled down the button position still on it original place (on left) while the site title remain on the left.
My purpose : When user scrolled down and the site title go up then the time the button will move to center.
Sory im not to fluent in english, and hope you can get what i mean
I have tried adding .sticky to the selector become #site-navigation.sticky but it doesn’t work
Hey @wpjakarta
I’m sorry, I’m still a bit unclear what you mean. If you apply the code I gave you, the MENU button will always be centered on mobile devices (when the menu is sticky or not). Here is a screencast for your reference:
Image link: https://d.pr/i/6w4Wgd
Helo @senff
i mean before it sticky the button will still remain on the right (on original place)
when it scroll and the sticky active then the button will move to center
Hey @wpjakarta
If the button should only be centered when you scroll down, try using this code:
@media screen and (max-width: 767px) {
.sticky #site-navigation {
text-align: center;
clear: both;
padding-bottom: 15px;
}
.sticky #site-navigation button {
float: none;
margin-top: 15px;
}
.sticky #site-navigation .handheld-navigation {
text-align: left;
}
}
hello @senff
Perfectly great!, it work like i want
thank you very much
