[Resolved] how to center a specific menu item

[Heinrich]

hi team, following your advice in #2468104
i created a block with menu-items.

now i want to center the searchbar. then “shop”, “my account icon” and last the “cart icon” should be on the right side.
how to do?

tks in advance.

[Fernando]

Hi Heinrich,

You can try adding this through Appearance > Customize > Additional CSS:

@media (min-width: 1025px) {
    nav .menu-bar-items .gb-container.gb-container-e6734480 {
        position:absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    nav .inside-navigation.grid-container {
        position: relative;
    }
}

@media (min-width: 1150px) and (max-width: 1300px) {
    .menu-bar-items .dgwt-wcas-search-wrapp {
        max-width: 400px;
    }
}
@media (max-width: 1149px){
    .menu-bar-items .dgwt-wcas-search-wrapp {
        max-width: 300px;
    }
}

[Heinrich]

hi fernando, done… tks a lot for quick help

[Fernando]

You’re welcome, Heinrich!

[Heinrich]

hi fernando, found a weird behaviour. in customizer the code is working fine, the search-field is centered. but in front-end view chrome, safari and opera not?
any idea?

[David]

Hi there,

can you share a screenshot of how it looks in the Customizer ?

[Heinrich]

here we go. found, that the css works, when i enter one space in the code, no matter where?

[David]

In your CSS you have these comments:

/* end of button styling -------------------------/*
/* all about menus ------------------------------* /
/* formats the primary menu */

Can you delete those, as they are broken. Which will break the CS after them

[Heinrich]

beginners level :-(( sorry

[David]

Easily done 🙂 Glad to be of help

[Author]

Posts