Archived topic
Menu Bar Icon Not Showing
21 replies · Started by huppap on March 2, 2023
Hi I am trying to add menu bar icon and I have followed this article
https://docs.generatepress.com/article/generate_menu_bar_items/
But after adding the menubar icon it does not show on the frontend for some reason.
Although you can clearly inspect element on it. I am using this code and showing it on entire site using "generate_menu_bar_items" hook element
website is added on the private information area where you can check this.
Thank you.
Hi there,
the hook is working as i can see the HTML, but the SVG has an issue.
Where did you get the SVG from ?
what is the issue with svg icon you see?
I got it from the live site, you can live site at www. instead of dev.
I even tested the svg icon you mentioned here with same issue.
on this link I mean
https://generatepress.com/forums/topic/icon-my-account-menu-bar/
Hmmm... try adding this CSS:
.menu-bar-item a svg {
width: 1.5em;
height: 1.5em;
}I applied it, and it looks kind of funny, and it seems to have changed the color and size for search bar icon too, I wonder why did that happen?
I could live with the color, but could you please help me align these?
Where can i see the issue ?
sorry, you should be able to see it now on dec site.
The alignment issue stems from the cart icon not having any padding.
Try this CSS to correct that:
.cfw_cart_icon_shortcode {
padding: 15px 15px 25px;
}
.main-navigation .menu-bar-items {
position: relative;
bottom: -5px;
}I applied this css and icons seem to be bit too far apart, could you help me being them closer as you see them on live site, and in that order please?
this is their documentation for adding side cart icon to places. Maybe we can choose a better approach?
also is possible to separate navigation from those icons and align navigation to the centre and search and account and cart icons to the right?
Try this CSS to improve spacing:
.menu-bar-items a {
padding: 15px 10px !important;
}
.menu-bar-items .search-item a {
position: relative;
bottom: 2px;
}And this CSS to center nav:
#site-navigation {
flex: 1;
}
#site-navigation #primary-menu {
margin: auto;
}Hi Dave, this is perfect, thank you.
Could you also help me arrange menu icons in the header in this order, please.
on Desktop - Search, Account, Cart
on Mobile - Menu Toggle, Search, Logo, Account, Cart (as you see on live site).
This will conclude header for me.
Thank you.
