[Support request] Primary navigation layout

Good suggestion, I have removed the following CSS and now the primary menu aligns in the centre on desktop:

.menu-bar-items {
    flex: 1;
}

However, the removal of this CSS causes the search bar on mobile not align in the centre!

Any solution to this?

EDIT: also how can I amend the padding/margin of the primary navigation?

Thank you for this, the alignment is centred on mobile. However, I notice that the search bar is smaller width despite having my CSS that controls width unchanged:

.menu-bar-items form.wp-block-search__no-button.wp-block-search {
    flex: 1;
    max-width: 100%;
}

I wonder whether it is because I removed the previous code that was conflicting with the customizer:

.menu-bar-items {
    flex: 1;
}

Hi, on mobile I want the search bar to take most of the space between the logo and the menu icon with maybe just 10px padding. Is there a way to set it from the settings? I have had quite a bit CSS added already and some things have started conflicting.

Hey it improves the mobile layout but distorts the desktop, makes the primary menu expand along the full length.

Now it gets the other way round, the size is fine on desktop but the search bar is too small on mobile:/

Hello, I have the following CSS:

/* Styles for all items */
.wp-block-navigation .wp-block-navigation-item__content {
        font-size: 20px;
    color: #000;
    background-color: #fff;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: #000;
    background-color: #ebfaff;
}

nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover  {
    color: #000000;
    background-color: #dedede;
}

/* styles specifically for sub menu items */
nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 20px;
    color: #101010;
    background-color: #EEEEEF;
}

ul ul .wp-block-navigation-item__content {
    grid-column: 1 / -1;
}

nav.wp-block-navigation .wp-block-navigation-item__content {
    background-color: transparent;
}

.wp-block-navigation.custom-nav .wp-block-navigation-item {
    display: grid;
    grid-template-columns: 1fr 10px;
}

.wp-block-navigation.custom-nav button[aria-expanded="true"] + span + .wp-block-navigation__submenu-container {
    position: static;
}

.gb-container .gb-shape {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    line-height:0
}

.menu-bar-items form.wp-block-search__no-button.wp-block-search {
    flex: 1;
    max-width: 100%;
}

.menu-bar-items .wp-block-search__input {
    border-radius: 10px;
}

#mobile-header .menu-bar-items form.wp-block-search__no-button.wp-block-search {
    max-width: calc(90% - 40px);
    margin-left: 20px;
}

@media (min-width: 769px) {
	.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 50%;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    height: 4px;

    background-color: currentColor;
}

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.1s width ease;
    }
}

    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 80%;
    }
}

/*Get primary menu centred on mobile, padding, margin*/
@media (max-width: 768px){
    .menu-bar-items .wp-block-search {
    margin-left: 0px !important;
}
.menu-bar-items  {
    margin-left: auto;
    margin-right: auto;
}
}

@media(min-width: 769px) { 
    .inside-left-sidebar {
        position: sticky;
        top: 150px;
    }
}

@media (mas-width: 768px){
.menu-bar-items {
    justify-content: center;
    flex-grow: 1;
}

#mobile-header button.menu-toggle {          
                font-size: 20px;
            }
}

#mobile-header .inside-navigation {
    justify-content: center;
}

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        border-bottom: 2px solid #d1d1d1;
         margin-right: 0px;
        margin-left: 0px;
        padding-left: 10px;
        font-size: 25px;
       
    }
}

/*Bottom shadow of main  menu*/
.main-navigation.is_stuck.navigation-stick {
    box-shadow: 0 4px 10px -2px rgba(0,0,0,.2);
}

.site-content {
    margin: 0px;
    padding: 20px !important;
}