Change the navbar

[Marinaol]

Hi,

I would like to know a few things about the Navbar:

1)How can I move my Navbar closer to my logo, towards the left?

I attached you an image of how it looks at the moment:

And this is how I want it to look like:

2. How can I move my logo to the left? where could I make this margin in the left smaller.

3)How can I make the thinner the line that appears when I put the mouse over the navbar?

Best regards,
Marina.

[ruenel]

Hello Marina,

Thanks for writing in!

1.) With what you want to happen in the header, it is best that you use the Pro theme. There is the custom header builder in the Pro theme that will allow you to create custom headers just like your example. You can even add or style it to your own liking.

With custom css, you use this to move the menu close to the logo;

.masthead-inline .desktop .x-nav {
    float: left;
}

2.) Moving the logo to the left side of the page will require custom css code. It will also create more complications to your design. If you truly want to modify the header, it is best that you use Pro theme as you already have a license for it.

If you use a custom css, it would be this:

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

3.) You will need a custom css to make the line thinner,

.x-navbar .desktop .x-nav > li > a:hover > span, 
.x-navbar .desktop .x-nav > li.x-active > a > span, 
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 1px 0 0 rgb(0,0,0);
}

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:
-https://www.w3schools.com/cssref/css_selectors.asp
-https://www.youtube.com/watch?v=GMk7ZLuo6Po

Regards.