Archived topic
Hamburger menu and search icons on mobile
5 replies · Started by David on June 17, 2022
Hi there,
I am trying to make hamburger menu and search icon more pronounced on newer mobiles and iPad Minis.
To this end I need some advice:
1. On newer mobiles, my search and menu icons look thin. I can adjust the font size in the type manager specifically for mobile, but how can I make these symbols bolder/fatter?
2. How can I have the hamburger menu to the left of the site logo and the search icon to the right? (Currently both appear to the right of the site logo)
Thank you very much for taking the time.
Hi David,
1. You can target the svg, then try something like this: stroke: black; stroke-width:20px;
2. Can you link us to your site?
Hi Ying,
I have added site and login credentials in the private area.
Best regards.
1.Try this CSS to bold the hamburger icon:
.gp-icon.icon-menu-bars svg {
stroke: black;
stroke-width: 50px;
}2. Try this CSS for the layout:
@media (max-width: 768px) {
.gp-icon.icon-menu-bars svg {
stroke: black;
stroke-width: 50px;
}
.inside-header {
flex-wrap: nowrap;
}
.inside-header >*:not(.toggled):not(.has-active-search) {
flex-basis: auto !important;
}
.site-logo {
position: absolute;
left: 50%;
transform: translatex(-50%);
top:30px;
z-index: 999;
}
.inside-header.grid-container nav#mobile-menu-control-wrapper, .menu-bar-items {
margin-left: 0;
width: 100%;
flex-wrap: nowrap;
justify-content: space-between;
}
button.menu-toggle {
order: -1;
}
.menu-bar-items {
justify-content: flex-end;
}
}Hi Ying,
your css (icon and layout) works like a charm.
I went ahead and also added the following css to make the search lens a bit thicker.
.gp-icon.icon-search svg {
stroke: black;
stroke-width: 25px;
}
Unlike the menu bars, which look great at stroke-width 50px, the lens can't take quite as much thickness, but 25px is a good compromise.
Thank you very much for your help!
Have a great day.
You are welcome :)
