Docs

[Rue Nel]

Hello There,

Thanks for the updates!

1] To make the titles of your megamenu blue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

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

2] To move the line from the top to the bottom of the menu item, you can make use of this code:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
    border-bottom: solid 4px hsl(0,0%,66%); 
}

3] To have the separator lines under the titles, please use this code:

.desktop .x-nav .x-megamenu>.sub-menu>li {
    border-color: transparent;
}

.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a {
    border-bottom: 1px solid #f2f2f2;
}

4] To remove border-radius and shadow from the menu, please make use of this code:

.masthead-inline .x-navbar .desktop .sub-menu {
    box-shadow: none;
    border: none;
    border-radius: 0;
}

5] Regretfully we cannot support any modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[daniq]

Hi,
Thank you so much! However, none of these codes are doing any changes. I have placed them in the css but my menu looks exactly the same. I have cleared cache and restarted my computer tried placing them again but nothing changed.

[Joao]

Hi There,

If not any of the the codes are working it is likely that you have a syntax mistake on your CSS

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Hope it helps

Joao

[daniq]

This reply has been marked as private.

[Joao]

Hi There,

You had a missing }

let us know if it works now,

Thanks

Joao

[daniq]

Yes !! thank you so much!!

[Joao]

You are welcome 🙂

[daniq]

So I have been able to make my menu look exactly like I wanted to and I’m just missing some small adjustment for it to be perfect.

1. In each column of the mega menu, how can I target the text that actually link to pages such as under “Colecciones” and then under “Joyería” I want the text like “Anillos”, “Aretes”, etc to be aligned to the left not centered.

2. That same text how can I eliminate the background color grey when I hover the link.

3. I have used a javascript code for the dropdown menu, but I only want this working in desktop not for mobile or tablet so not for anything larger than 979px.

4. How can I eliminate the extra padding or margins of my menu on the responsive mode. I have used margin-bottom to style the menu in css for desktop but despite my efforts I cannot eliminate them for anything smaller than 979px. So my menu for the tablet and mobile have huge gaps between them. Please see attached image.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.desktop .x-nav .x-megamenu>.sub-menu a {
    padding: 6px 10px 6px 0;
    text-align: left;
}
.desktop .sub-menu a:hover {

    background-color: transparent;
}

Find this code :

.x-navbar .x-nav > li {
    padding: 8% 1.429em !important;
}

And update it to :

@media (min-width:979px){
.x-navbar .x-nav > li {
    padding: 8% 1.429em !important;
}
}

#3 Please check this link : http://www.coalmarch.com/blog/how-to-execute-javascript-based-on-screen-size-using-jquery

Hope it helps.

[Author]

Posts