Vertically Align Header Menu **HELP**

Store Design
, , , , , , , , , ,
1

Hello everyone, I have an online store website in which I have centered the header menu to get left side but, as you can see It is not vertically alined with the logo can anyone help me?

MY STORE WEBSITE: www.gadget-pods.store PASSWORD: 110

2

Hey @RahbarAli150 ,

To vertically align the header menu with the logo, you can apply the flexbox layout to the parent container of both the logo and the menu. Assuming the logo and menu are in a shared header container, you can adjust their alignment like this:

Steps to vertically align the header menu:

  1. Ensure the header container has a flexbox layout: If your logo and menu are in a common parent element, you need to apply display:flex to that parent to align them vertically.

  2. CSS Code to Apply:

.header {
    display: flex;
    align-items: center; /* Vertically center items in the header */
    justify-content: space-between; /* Adjust the spacing if necessary */
}

.header__inline-menu {
    display: flex;
    align-items: center; /* Vertically align the menu items */
}

.list-menu__item {
    margin: 0 15px; /* Adjust the spacing between menu items */
}

.header__menu-item {
    display: flex;
    align-items: center; /* Align text within the menu item */
}
  1. Ensure the Logo Is Also Properly Aligned:

If you are using a logo image, make sure that the logo is also centered vertically by applying a similar display:flex and align-items:center to its container. For example:

.header__logo {
    display: flex;
    align-items: center; /* Vertically align the logo */
}
  1. Adjust for Any Specific Styles:

If the items still don’t line up perfectly, you might need to apply margin or padding adjustments to either the logo or the menu items. For example:

.header__logo {
    margin-right: 20px; /* Adjust this if the logo is too close or far from the menu */
}

By applying these styles, your header logo and menu should be vertically aligned. Let me know if you need further adjustments!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

Hello @RahbarAli150
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (min-width: 990px) {
.header--top-center .header__inline-menu {
justify-self: center;
text-align: center;
}
}

result

2.png
2.png588×338 38.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

What the hell is his?? Are you stupid indian? I asked to keep it on the left but you see how I is in the bottom? Move IT IN HE MIDDLE!!

5

Hello @RahbarAli150

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media screen and (min-width: 990px){
    .header-wrapper header.header.header--top-center {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .header-wrapper header.header.header--top-center h1.header__heading {
        order: 2;
    }
    .header-wrapper header.header.header--top-center nav.header__inline-menu {
        order: 1;
        width: unset !important;
    }
    .header-wrapper header.header.header--top-center .header__icons {
        order: 3;
    }
}

Output : https://prnt.sc/8_YSEBMZq3Cw

Please hit Like and Mark it as a Solution if you find our reply helpful.