Primary navigation layout

Hi there,

Can you confirm that the navigation alignment is set to center in the customizer?
https://docs.generatepress.com/article/navigation-layout/

That option should set the logo and menu to center by default.

If it's not working for you, can you temporarily remove all of your custom CSS to make sure nothing is conflicting?

Let me know :)

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?

Hello there,

Can you try adding this through Appearance > Customize > Additional CSS?:

@media (max-width: 768px){
    .menu-bar-items .wp-block-search {
    margin-left: 0px !important;
}
.menu-bar-items  {
    margin-left: auto;
    margin-right: auto;
}
}

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;
}

Yes, it's because you removed that.

What width are you looking to achieve?

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.

Can you remove this custom code you have:

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

Then, add this:

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

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

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

I see. I updated the code here https://generatepress.com/forums/topic/primary-navigation-layout/#post-2584859

Can you try it out?

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

Can you share all your Additional CSS here?

The Additional CSS isn't loading on your site. You may have added a syntax error somewhere or there may be a different issue..

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;
}

There's no syntax error.

Can you try disabling all caching and optimization plugins you have? Let us know once this is done, and we'll recheck.