Docs

[Megalon]

Hi

I have used the following code to add ‘vars’ icon to the menu, but it is showing a house

<i class=”x-icon x-icon-bars” data-x-icon=””></i>

I initially used

<i class=”x-icon x-icon-home” data-x-icon=””></i>

but then changed the icon name – I have deleted the menu item and inputted the correct code, but still see the house

Please help

Thanks

[Megalon]

Apologies – site is

http://site.taylored-group.com

Thanks

[Joao]

Hi There,

Use the codes below instead :

<i class="x-icon x-icon-bars" data-x-icon="" aria-hidden="true"></i>

<i class="x-icon x-icon-home" data-x-icon="" aria-hidden="true"></i>

Hope it helps

Joao

[Megalon]

Hi

That’s great thanks Joao

One other thing I am struggling with is the background colour of the menu – is there any way to set this and also the hover over colour of the drop down menu?

Thanks

Phil

[Rupok]

Hi Phil,

Thanks for writing back. There is no background color currently. Do you want to set a background color for the icon only? Can you show us a example or screenshot? Also do you want to keep the arrow or want to remove as it looks a bit odd?

And to change the hover color of submenu items, you can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav .sub-menu > li > a:hover {
  color: red;
}

Let’s adjust the color with your preferred color.

Cheers!

[Megalon]

Hi

Ideally, I would like the menu to like the attached – so having a 2 tone hover over, the word ‘MENU’ above and Social Media icons below, but any help would be appreciated.

Cheers!

[Joao]

Hi There,

Before we get to the styling let´s correct something.

In order to make your Menu Appear as a mobile menu, it is not necessary or reccomendable to do how you did.

Please build a normal menu without the mobile menu link that you built as a parent link.

After that add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 2000px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
    background: none;
    box-shadow: none;
    font-size: 30px;
    color: grey;
}

}

Hope that helps

Joao

[Megalon]

Thanks Joao

That works a treat – any other pointers on how to get it more like the screen grab?

Also, the menu icon doesn’t show fully (attached), I presume that I have to adjust the header size to show it, or can I make the icon smaller?

Thanks

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.masthead-inline .x-btn-navbar {
    color:#ccc;
}

Hope that helps.

[Author]

Posts