Archived topic
Pivot theme hamburger icon on mobile menu won't change in size
4 replies · Started by Cynthia on June 15, 2021
I am trying to increase the size of the hamburger icon for the mobile menu. On other GP sites the button.menu-toggle seems to do the trick with font-size attribute but on the Pivot theme when I change the font size to 50px, nothing happens. Is there somewhere else or another tag preventing this?
Site URL is in the private info
@media (max-width: 768px) {
button.menu-toggle {
font-size:50px;
color:#73e0c0;
}
}
Hi there,
Try this instead:
@media (max-width: 768px) {
button.menu-toggle {
font-size: 50px !important
color: #73e0c0;
}
}Hi Leo
That did not work unfortunately. :/
Hi Leo
It appears that this is the tag that works, .gp-icon svg, however it is linked to the scroll up element at the bottom as well.
So when I increase the font-size for the menu, then the scroll up element becomes larger also, which I don't want. Infact I'd like to make the scroll up element smaller, while making the hamburger larger. Is there a way to do that?
.gp-icon svg {
font-size:20px;
}
Hi there,
font-size property only works if the target element within the DOM is a text string.
Your site is using SVG icon for its hamburger so it technically is an image rather than a text.
What we need to set is the width or height of the svg in case like this:
Try this CSS:
button.menu-toggle span.icon-menu-bars svg {
width: 50px;
height: auto;
color: #73e0c0;
}