Hi @rebecka,
Could you clarify which icon you’re trying to change for me? If possible, it would be great if you could provide a direct link to your site so that I can inspect its code and provide you with what you need. If you’re not able to provide a link to your site, then perhaps you could use the theme’s demo site to point me to the icon that you’re trying to change.
Thanks!
Thread Starter
anonymized-7517021
(@anonymized-7517021)
Edit: I wrote that I had solved it but that is not true.
-
This reply was modified 8 years, 7 months ago by
anonymized-7517021.
-
This reply was modified 8 years, 7 months ago by anonymized-7517021.
Thread Starter
anonymized-7517021
(@anonymized-7517021)
Hi @siobhyb,
I found where I could change the icon in CSS:
.menu-toggle:before, .navigation-main .widget-handle:before {
content: '\f419';
font-family: 'Genericons';
font-size: 1.2rem;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
vertical-align: middle;
}
The problem? That the icon is the same for collapsed menu (smaller/mobile screen size). I want to keep the current icon on mobile screen size, because only the menu will appear, but the computer screen size will display the sidebar. Can I have two icons, one for full screen and one for collapsed menu/mobile screen?
Thanks!
Thread Starter
anonymized-7517021
(@anonymized-7517021)
If you’re not able to provide a link to your site, then perhaps you could use the theme’s demo site to point me to the icon that you’re trying to change.
Yes, look at the demo @siobhyb. I have installed the theme locally on my computer. The icon I’m talking about is the one in the top right corner. You click on it on a computer to display a sidebar. However, if the screen size is smaller, a menu and no sidebar will open instead.
Thread Starter
anonymized-7517021
(@anonymized-7517021)
Decided to try something different. I will create a new thread for it.
The problem? That the icon is the same for collapsed menu (smaller/mobile screen size). I want to keep the current icon on mobile screen size, because only the menu will appear, but the computer screen size will display the sidebar. Can I have two icons, one for full screen and one for collapsed menu/mobile screen?
You could use media queries in your CSS to only customise the site for certain devices.
For example, the following CSS would only apply when the site is being viewed on a devices that’s 1023px in width or wider:
@media (min-width: 1023px) {
.menu-toggle:before, .navigation-main .widget-handle:before {
content: '\f419';
font-family: 'Genericons';
font-size: 1.2rem;
font-weight: bold;
line-height: 1.3;
text-decoration: none;
vertical-align: middle;
}
}
Let me know if that helps! I’ll keep an eye out for your separate thread too.
