How to bold the Header Menu And How to make to center ?

Hi,

Theme : Warehouse

When I this code the fotter is Changing

@media screen and (min-width: 990px) { .list--unstyled{ display: flex; justify-content: center; align-items: center; } .nav-bar__link{ font-weight: 900; } }

When i use the below code all are going to the center :

@media screen and (min-width: 1000px) {
.nav-bar {

font-weight: 700;
text-align : center;
}
}

lesriches_1-1723040232295.jpeg

when i use this code as well:

.nav-bar .nav-bar__linklist{ text-align: center; }

can anyone help us please

1 Like

Hi @lesriches

Could you share the store URL and password?

@lesriches - can you please share this page link?

Hello @lesriches .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

https://lesriches.co.uk/
pass : admin@les

  • Here is the solution for you @lesriches
  • Please follow these steps:

  • Then find the base.css or theme.css file.
.footer__title[disabled], .footer__title {
    font-weight: bold !important;
    text-align: center !important;
}

.footer__link-item {
    text-align: center !important;
}
  • Then add the following code at the end of the file and press β€˜Save’ to save it.

  • Here is the result you will achieve:

  • Please press β€˜Like’ and mark it as β€˜Solution’ if you find it helpful. Thank you.

Hi @lesriches

Make a slight change to ensure that the CSS only affects the Header and not other components. It looks like this


If it’s helpful, please like and mark it as a solution, thank you

the above does not work for me
Store Url : https://lesriches.co.uk/
password : [email removed]

hi,

i need the code for the header menu, which does not effect the footer .

thanks

1 Like

@lesriches - please add this css to the very end of your theme.css file and check,
Shopify Admin β†’ Online Store ->Theme β†’ Edit code β†’ theme.css

.footer__title{font-weight: bold;}

Can you try this code @lesriches

.nav-bar__link {
        font-weight: bold !important;
    }
.mega-menu__column {
    text-align: center !important;
}

Hi ,

i need only the highlighted menu in center

thanks

1 Like
.shopify-section-group-header-group .header+.nav-bar .nav-bar__inner .container {
 text-align: center !important;
}

@lesriches like this?

Hi BSS-TekLabs ,
Yes i need excatly same but the font should in bold .
thanks
Preview

1 Like
.nav-bar__link {
        font-weight: bold !important;
    }
.shopify-section-group-header-group .header+.nav-bar .nav-bar__inner .container {
 text-align: center !important;
}

Can you try this code @lesriches

hi,

can you please have look the screen short i dont want the highlited one in the middle ,

thanks.

1 Like
.nav-bar__link {
        font-weight: bold !important;
    }
.shopify-section-group-header-group .header+.nav-bar .nav-bar__inner:first-child {
 text-align: center !important;
}

Can you replace to this code @lesriches

hi,

Still in the no change when i replace with above code.

thanks.

1 Like
.nav-bar .mega-menu {
    text-align: left !important;
}

Can you add more code @lesriches

1 Like