Navigation Menu Settings

Hi there,
Maybe this is simple but honestly, I’m already trying to get what I want for days now and I can’t do it correctly.

From the image on top, I want to drag more the text logo to the left and the button item more to the right. I don’t know what to change on the header option on the X theme or am I really gonna put a css code now? Either way, I already tried it but it didn’t work. I know I am doing it wrong.

Can you please help?

VA of Shlomo here. :slight_smile:

Hello Shlomo,

Thanks for writing in!

The width of the header navigation is taking it settings from X > Theme Options > Layout and Design > Site Max Width and the X > Theme Options > Layout and Design > Site Width. If you want to override this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .x-container.max.width {
    width: 96%;
    max-width: 96%;
}

Feel free to adjust the width and maximum width in the code above.

1 Like

Thank you very much Ruenel. It worked!

One last thing:

I’ve added a padding-top: 40px; so that the button and the logo will not be covered when a floating form on top appears. Now, the problem we have is that, the slider below it was slightly covered now by the navbar.

I added again a code to the body, a padding-top of 40px, it didn’t worked and instead, the padding-top was added on top of the navbar which resulted to kind of transparent, no content whatsoever on top, rather than pulling the slider down so that it won’t be covered. which I then quickly removed.

I don’t know what is the best thing to do as I am stuck in my work here.

Just a heads up, I just want the slider not being covered by the navbar.

I already take care of the responsiveness. So, I just can’t resolve it on Desktop view.
Thank you very much.

Hello Shlomo,

What is your custom css to add the top padding? It is added in the navbar? If that is the case, you may need to increase the top navbar height in X > Theme Options > Header > Navbar > Navbar Top Height from 60 pixels to 100 pixels since you have added a top padding. If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

Hello there Ruenel,

Yes. Glad to give you access. Sorry for the additional work I asked.
My va still trying to learn this kind of thing so I don’t expect much from him.

The navbar top height of 100px doesn’t work and instead, it adds a padding at the bottom of the navbar which results to making the logo and the button at the center of the navbar and does not push the slider rev down. Please see the link in a secure note:

I made back the navbar top height to 60px. So you can do so if you want to see the changes.

Will send you access on a secure note. Thank you very much.

Hello Shlomo,

It seems that your background image added in the slider does not have a border:

I went ahead and adjusted your header. I have replace this code:

.x-navbar .x-container.max.width {
    width: 96%;
    max-width: 94%;
}
.x-navbar{
  padding-top:40px;
}

Used this code instead:

.x-navbar .x-container.max.width {
    width: 96%;
    max-width: 94%;
  padding-top:20px;
	padding-bottom:20px
}
.x-slider-container.below {
    border-top: solid 4px white;
}

And then I have change the Navbar Top Height from 60 pixels to 100 pixels.

Kindly check your site now.

1 Like

Wow! Thanks! We could not fix it without you. Thank you very much!

Making it live now on main site.

You’re most welcome, Shlomo. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.