CSS Classes for Menu Icons – Icons not appearing in Titlebar

[Michael]

Hello,

im adding CSS classes for the menus icons , i did it as the tutorial video you have for the buddypanel and worked but when I put css classes for my titlebar menu, it doesnt work – it works for every other menu, footer menu and buddypanel, but icons do not appear in the titlebar menu next to the text – please let me know the solution for this also. I’ve attached a photo to show you this problem …

[Anonymous]

Hi @miguelp,

You can use a simple plugin to add icons
https://wordpress.org/plugins/menu-icons/

Use this approach to add icons for top menus only
BuddyPanel already have build it approach using fontAwesome Icons class names.

Regards
Varun Dubey

[Michael]

hello @vapvarun ,

I downloaded that for the titlebar menu but these are the icons that dont appear in the titlebar – they only appear in the footer menu…

[Michael]

hello again @vapvarun

I managed to get the icon on the top main menu as you can see, but for some reason when i put the icon, the page title overlaps the icon and the background color of the page name,font size and actual title name color changes. How can I fix that?

Ive added a picture of what happens when i add the icon on one of the pages…

Kind Regards

Michael*

[Anonymous]

Hi @miguelp, Please add this css code inside your boss theme’s custom css option..

.is-desktop .header-navigation ul li a span, .boxed.is-desktop #mastlogo .site-title a, .is-desktop #item-buttons .pop .inner a {
    color: #000 !important;
    background: none !important;
    position: inherit !important;
    top: -1px !important;
    padding: 0px 4px !important;
    font-size: 14px !important;
}

Regards

[Michael]

hello again @pallavi ,

thanks for the code – the pages and icons went into place but now the hover color for the pages are not appearing. The hover link color is set to the red as seen in the picture i attached.

So the issues now are:

1. When i hover the icons they have the hover color but the pages don’t
2. The icons are a little bit too far apart from the page names so its a bit confusing
3. the notifications box of the new messages is white and not red as well (as you can see in the picture i attached below so the number appears and the box is not visible due to the background of the titlebar being white also. How can I make that red too? (For some reason the notifcations box appears red everywhere else including the buddypanel but the titlebar its white)

How can i fix those ?

Regards

[Anonymous]

Hi @miguelp, Try this:

@media screen and (min-width:481px){
.header-inner .middle-col .header-navigation ul li a span {
  right: 3px!important;
}
.horizontal-responsive-menu li.menu-item a:hover span
{
color:red!important;
}
.notification-link .pending-count {
  background-color: red!important;   
}
}

Regards

[Michael]

hi again @pallavi

everything worked except the color of the box with the number of new messages – it remains white …

is there any other code for that?

Thanks

M

[Anonymous]

Hi @miguelp, Try this:

.header-navigation #header-menu .horizontal-responsive-menu li a .count {
  background-color: red !important;
  color: #fff !important;
}

Regards

[Michael]

hi again @pallavi

im still getting the same thing, background color of notifications box is still white…ive attached the photo with an outline to show you…

[Anonymous]

Hi @miguelp, Seems like css is not overriding in your site..please send your website login credentials from our Contact us page I will check that.

Regards

[Michael]

Hello @pallavi

I have sent my site info through the contact us page a few days ago for the issue with the other css not overiding…

Also anotehr issue with the CSS is now the buttons on mobile display show witha red box around the page titles and become smaller… this issue is in the picture ive attached…

[Anonymous]

Hi @miguelp, Sorry But we did not get the mail yet..please send it again I will check for both..(mobile issue also).

Regards

[Michael]

Hello again @pallavi 🙂

I’ve just sent it again and sent you a private message also with a couple of other CSS issues …

Thanks

M*

[Anonymous]

Hi @miguelp, We have got the mail now…I will check the and reply you there.

Regards