Uncentered nav logo

Design help General
1

Hi there, we have a site with a navbar and a central logo within it with links either side, but using the guides it’s completely off centre and I can’t work out for the life of me why any ideas?

Thanks in advance,
Jamie

00
001625×842 370 KB

Here is my public share link: https://preview.webflow.com/preview/bentleyandmane?preview=bb37a314e623eb0fa0e3aa3fa49252ae

(how to access public share link)

2

HI.

You can not align logo to the center like this (for now your logo is part of the list)

Absolute position

The easiest way is to give your logo absoulte position. See this stackoverflow:

.navbar {
    position: relative;
}
.brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

Remember this issue:

NOTE:
This is not responsive approach (If you write very long <a> names and/or a lot of links your layout will look broken - but for desktop it should work + This is not 100% elegant - i added manually “margin-left” to “lifestyle” link (remember to remove this margin on tablet/mobile) + dont use %width for the logo in this case

Solution in your code:

First you add endless “style salad” (flex and styles) to the core nav - my solution not change this “salad”

tuturial
tuturial1920×2346 1.51 MB

More responsive approach:

ONE famous trick: Create 2 UL (two lists with two wrappers)
[list one - align to left][center logo][list two - align to right] but you can not to this on webflow :)
https://getuikit.com/docs/navbar#centered-logo

// or by flexbox but again without extra wrapper is little hard - if you really want try to find codepen/jsfiddle

3

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