Docs

[MadeOfStars]

Hello X team,

I am using the latest release of X theme (4.6)

I would like to do some more modification to the navbar and the drop down menu.

1. Keep the cart and search on the right, the logo on the left and center the rest of the navbar text in between.
2. Center align the drop down menus under their navbar links rather than to the left, while keeping their text centered.
3. Remove the horizontal grey lines between drop down menus text.

I have attached an image of the current look.
Here is the current CSS am using.

/* sub menu top alignment */
.x-navbar .desktop .x-nav > li ul {
top: 69px;
}
.x-navbar .sub-menu {
min-width: 170px;
}
.x-navbar .sub-menu a {
text-align: center !important;
}

Thanks for your amazing support

[Rupok]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[MadeOfStars]

Hello Rupok,
I have put the website in ‘Under construction’ mode as per the client request.
Instead, I attached the visual of the what am trying to achieve here.
Hope it’s clear.

[Jade]

Hi there,

If you have the website online but in under construction mode, kindly provide us with the link to the site and the login details so that we could provide you with the CSS tailored to your need.

Thank you.

[MadeOfStars]

This reply has been marked as private.

[MadeOfStars]

This reply has been marked as private.

[MadeOfStars]

This reply has been marked as private.

[MadeOfStars]

Hello again,
I have centered the navbar with the logo and am happy with it now.
However I would still like to do the following:

1. Center align the drop down menus under their navbar links rather than to the left, while keeping their text centered.
2. Remove the horizontal grey lines between drop down menus text.

I have tried some coded on the forum but didn’t work out for me.

Cheers.

[Lely]

Hi There,

Glad you were able to center the navbar.
I tried to check the remaining issues, unfortunately, the credentials is not working. Please double check.

[MadeOfStars]

This reply has been marked as private.

[Rue Nel]

Hello There,

I have now viewed your site. To center your submenu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead-stacked .x-navbar .desktop .sub-menu {
    left: 50%;
    margin-left: -85px;
}

And to remove the grey lines in the sub menu items, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .sub-menu li:before, 
.x-navbar .desktop .sub-menu li:after {
    display: none;
}

Please let us know if this works out for you.

[MadeOfStars]

Hey buddy,

Unfortunately, none of them worked.

I have those codes running now, do yo think there is any conflict?
Also don’t forget to send me CSS for the centering the sub menu text.

Cheers.

/* sub menu top alignment */
.x-navbar .desktop .x-nav > li ul {
top: 45px;
}
.x-navbar .sub-menu {
min-width: 170px;
}
.archive .site {
background-color: #f6f1ed;
}
body .x-btn-navbar {
background-color: transparent;
box-shadow: none;
.entry-featured {
border: none !important;
}
.woocommerce li.product .entry-featured {
border: 0 !important;
padding: 0 !important;
}

[Paul R]

Hi,

There is a missing bracket in your css code.

Kindly replace your code with this.

/* sub menu top alignment */
.x-navbar .desktop .x-nav > li ul {
      top: 45px;
}

.x-navbar .sub-menu {
      min-width: 170px;
}

.archive .site {
      background-color: #f6f1ed;
}

body .x-btn-navbar {
      background-color: transparent;
      box-shadow: none;
}

.entry-featured {
      border: none !important;
}

.woocommerce li.product .entry-featured {
      border: 0 !important;
      padding: 0 !important;
}

.x-navbar .desktop .sub-menu li:before, .x-navbar .desktop .sub-menu li:after {
    background-color: transparent !important;
}

.x-navbar .desktop .sub-menu li>a {
    text-align: center;
}

Hope that helps

[MadeOfStars]

Amazing man, It worked perfectly.

I still need to center align the dropdown menu text.
Also can we decrease the vertical margin at the bottom and top of the drop down menu to match the sides?

Cheers.

[Joao]

Hi There,

To center the submenu items please place this code on Appereance Customizer Custom CSS

.masthead-stacked .desktop .x-nav {

text-align: center;

}

And to reduce the vertical padding of the submenus:

.masthead-stacked .x-navbar .desktop .sub-menu {
padding: 10px;
}

Hope that helps

Joao

[Author]

Posts