Tagged: breakpoint, CSS, Desktop, hamburger, menu, mobile view
Hi Guys,
Ive added this following code to add the word menu to the burger menu in desktop view,
/*————————*/
/* Add word menu next to hamburger icon
/*————————*/
.av-hamburger strong {
display: block!important;
position: absolute;
left: -90%;
top: 0;
font-size: 20px;
transform: translate(-90%, -44%);
}
and that is working fine except for a small problem
In mobile view there is a overlap of the logo and the word menu –
i think the best solution is to keep the word menu in desktop view – but remove it for mobile views
can you guys provide me with some css to do this.
Thanks
Stewart
Hey Stewart,
Please send us a link to where we can see the element in question. If you can’t do that then you can use a media query to specify the code you added above a certain pixel value, for instance:
@media only screen and (min-width: 990px) {
.av-hamburger strong {
display: block!important;
position: absolute;
left: -90%;
top: 0;
font-size: 20px;
transform: translate(-90%, -44%);
}
}
Best regards,
Rikard
worked perfectly – much appreciated.
thanks
Stewart
Hi,
Glad Rikard could help! :)
For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)
Best regards,
Yigit