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

[lesriches]

Hi,

Theme : Warehouse 

When I  this code the fotter  is Changing 

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

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

when i use this code as well:

<style> .nav-bar .nav-bar__linklist{ text-align: center; } </style>
can anyone help us please

[BSSCommerce-B2B]

Hi @lesriches 

Could you share the store URL and password?

[lesriches]

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

[BSSCommerce-B2B]

Hi @lesriches 

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

<style>
@media screen and (min-width: 990px) {
#mobile-menu .list--unstyled{
display: flex;
justify-content: center;
align-items: center;
}
.header .nav-bar .nav-bar__link{
font-weight: 900;
}
}
</style>

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

[lesriches]

the above does not work for me 
Store Url : https://lesriches.co.uk/
password : admin@les

[suyash1]

@lesriches - can you please share this page link?

[suyash1]

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

[BSS-TekLabs]

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.

[BSS-TekLabs]

- 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.

[lesriches]

hi,

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

thanks 

[BSS-TekLabs]

Can you try this code @lesriches 

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

[lesriches]

Hi ,

i need only the highlighted menu in center

thanks

[BSS-TekLabs]

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

[BSS-TekLabs]

@lesriches  like this?

[lesriches]

Hi  BSS-TekLabs ,

Yes i need excatly same but the font should in bold .
thanks

Preview

[BSS-TekLabs]

    .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 

[lesriches]

hi,

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

thanks.

[BSS-TekLabs]

    .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 

[lesriches]

hi,

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

thanks.

[BSS-TekLabs · Accepted solution]

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

Can you add more code @lesriches 

[lesriches]

Thanks It's Working 

[BSS-TekLabs]

Glad to help you. Have a good day.