Fixed nav buttons + centered logo

Site URL: https://www.studiokahi.com/

Hello,

Despite my research, I cannot find a solution to my problem. 
I would like the buttons on my nav bar to remain horizontally aligned when I reduce the size of my browser window and when the site is displayed on the tablet.
Currently, the buttons shift completely (photo attached), and I don't know how to solve this problem.

Thanks for your help!

1 hour ago, Juliechr said:

Site URL: https://www.studiokahi.com/

Hello,

Despite my research, I cannot find a solution to my problem. 
I would like the buttons on my nav bar to remain horizontally aligned when I reduce the size of my browser window and when the site is displayed on the tablet.
Currently, the buttons shift completely (photo attached), and I don't know how to solve this problem.

Thanks for your help!

Try adding to Home > Design > Custom Css

@media only screen and (min-width: 1024px) {
  .Header-nav-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 30%;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

Thanks for your very quick answer! 🙂

It's actually working, but that's not the result I want. I'd like to have something like the photo attached, where everything is horizontally aligned on desktop and tablet.

Sorry if my previous message wasn't very clear...

Thanks again,

On 3/11/2022 at 11:29 PM, Juliechr said:

Thanks for your very quick answer! 🙂

It's actually working, but that's not the result I want. I'd like to have something like the photo attached, where everything is horizontally aligned on desktop and tablet.

Sorry if my previous message wasn't very clear...

Thanks again,

 

Don't remove any code in your current code. Add to Design > Custom CSS

.Header-nav-inner {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

Hello @tuanphan

Thanks for your help 🙂 

It's working, but I still have some issues...

When I reduce the size of the window on desktop, the logo gets smaller and ends up disappearing (image attached) and when I reduce even more, some buttons are cut on the border of the page... (image attached)

Do you know, by any chance, how to fix it?

Thanks a lot for your time, I appreciate!

Maybe set one line on some specific screen sizes only. What do you think?

Hello @tuanphan and @bangank36 🙂

I've found a website made on Squarespace that have a nav bar exactly how I want.
Here is the website : https://www.cloverandcrow.com/

Do you know what code did she use to have that result?

Thanks for your help!

Julie

17 hours ago, Juliechr said:

 

I've found a website made on Squarespace that have a nav bar exactly how I want.
Here is the website : https://www.cloverandcrow.com/

Do you know what code did she use to have that result?

Thanks for your help!

Julie

I checked & see this code

@media only screen and (min-width: 640px) {
    .header-announcement-bar-wrapper {
        margin-top:-23px
    }

    .header-announcement-bar-wrapper .header-actions {
        display: none
    }

    .header-announcement-bar-wrapper .header-title-nav-wrapper {
        flex: 0 0 100%
    }

    .header-announcement-bar-wrapper .header-title-nav-wrapper .header-title {
        display: none
    }

    .header-announcement-bar-wrapper .header-title-nav-wrapper .header-nav-list {
        display: flex;
        justify-content: space-between !important
    }

    .header-announcement-bar-wrapper .header-title-nav-wrapper .header-nav-item--active a {
        background: none !important
    }
}

and you need to set initial layout to this

@tuanphan Thanks for your time!

I've pasted the code but it's still not working, I don't know why...
Maybe because the woman on Clover & Crow didn't use an image for a logo ?
I really don't know 😕