Align Nav Bar left

Hi @lemongrenade,

I checked your site and can see all your menu items in one single row.
https://vertis.d.pr/oHzq4z
Have you added the page that you mentioned above?

Here is how your navbar looks like. https://vertis.d.pr/znDFUc
The orange part is the margin, if you would like to move it to the left, you can use the snippet below.

.navbar.hestia_left .navbar-collapse {
    margin-right: 20px !important;
}

Hope that helps.

Hi @lemongrenade,

Kindly try the snippet below.

@media (min-width: 769px)
.navbar.hestia_left .title-logo-wrapper {
    min-width: 150px !important;
}

.navbar.hestia_left .navbar-collapse {
    margin-left: 5px !important;
}

Let us know if this works for you.

Hi @lemongrenade!

Please add the code below in the Additional CSS section within the Customizer. It should remove the extra space from the right side of the logo component and the right margin of the menu component, so there will be enough space for the menu on some devices. However, this depends on the width of the device. For smaller screens, the menu may still be split in multiple lines given the number of menu items added because there is simply no space to display all of them on the same line.

.title-logo-wrapper{
    min-width: auto !important;
}

#main-navigation{
    margin-right: 0px !important;
}

Have a nice day!

@lemongrenade We’re glad we could help! It would be great if you could mark this thread as resolved.

Thank you and have a great day ahead!