Archived topic
Menu and Slideout Navigation
5 replies · Started by Gabriel on January 13, 2019
I am having trouble adding a slideout navigation button to my menu. I have used a header to replicate the menu, because I thought that would give me a bit more control. I want the slideout button to appear above the start of the body container, while keeping the rest of the menu items centered. Any help would be appreciated.
Hi there,
personally i would build the Site Header and Nav using the Theme. The theme elements uses validated HTML and schema markup which is really important for search engines, will also be a lot easier to maintain the navigation if you need to make changes. We can assist with CSS to help you style. Let me know.
Hello David, thanks for the info. I have reverted back to using a primary menu. I have the slideout navigation button, but I would like for it to be above the left edge of the hero image, but on the menu bar. I was wondering how I would go about adding the word "Menu" next to the hamburger icon as well. Any help would be greatly appreciated.
Hi there,
try this CSS for re-arranging the hamburger icon, i assumed you wanted the rest of the menus to be centred, the last line of the CSS sets the label for the menu.
@media (min-width: 769px) {
.main-navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 20px;
padding-right: 20px;
}
.sf-menu>li.slideout-toggle {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-right: auto;
}
.main-navigation ul li:nth-last-child(2) {
margin-right: auto;
}
.main-navigation .slideout-toggle a:after {
content: 'Menu';
}
}Thank you David, worked perfectly!
Awesome. Glad to be of help.
