Hi @blablacat
Hiding the menu icon would be the easier option, as you could use the following CSS:
.menu-toggle:before {
display: none;
}
You could also remove the word Menu, but it would either be a little “hacky” or you’d need to work set up and modify a child theme.
align the dropdown menu on the left and not on the right
The toggled menu should be left aligned already – did you want it on the right instead?
If so, this CSS should do that for you, as well as change the colors.
/* right indent for child pages */
.main-navigation ul ul li a {
padding-right: 14px;
}
/* right indent for grandchild pages */
.main-navigation ul ul ul li a {
padding-right: 28px;
}
/* right align menu */
.main-navigation {
text-align: right;
}
/* menu colors */
.current_page_item a,
.current-menu-item a,
.main-navigation li:hover>a,
.toggled .menu-toggle,
.menu-toggle:hover {
color: #f68060;
}
.menu-toggle:hover,
.toggled .menu-toggle {
border-color: #f68060;
}
You can replace #f68060 with your own HTML color code 🙂
For the sizing, are you looking to change the size only on the toggled menu, and not the horizontal menu? Or change the size everywhere? 🙂
Hi! First of all: thanks for the help!
I forgot to say that I’m already using a child theme based on Sketch 🙂 so if you could explain me a way to remove or change the “menu” button and keep the three-line icon, it will be perfect!
I’ve tried your css and now it works!
Happy to help 🙂
First, in your child theme, make sure you have a copy of the parent themes header.php file.
Locate this line of code:
<button class="menu-toggle"><?php _e( 'Menu', 'sketch' ); ?></button>
In the original file, it should be on or around line 31.
Remove the middle part, leaving just this:
<button class="menu-toggle"></button>
That will remove the word Menu.
Then you can use the following CSS to center the icon a little better:
.menu-toggle:before {
margin: 0 0 0 2px;
}
Should do the trick 🙂
