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

Solved

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

lesriches
Excursionist
30 0 10

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>

lesriches_0-1723040232445.png

 

 

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:

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

Accepted Solution (1)
BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

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

Can you add more code @lesriches 

BSSTekLabs_0-1723047125602.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 21 (21)

BSSCommerce-B2B
Shopify Partner
1969 564 566

Hi @lesriches 

Could you share the store URL and password?

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

lesriches
Excursionist
30 0 10

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

BSSCommerce-B2B
Shopify Partner
1969 564 566

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

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

lesriches
Excursionist
30 0 10

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

suyash1
Shopify Partner
9997 1241 1579

@lesriches - can you please share this page link?

Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
suyash1
Shopify Partner
9997 1241 1579

@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;}
Amazing chess game | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

BSS-TekLabs
Shopify Partner
2350 688 806

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSS-TekLabs
Shopify Partner
2350 688 806

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

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

BSSTekLabs_0-1723042347738.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lesriches
Excursionist
30 0 10

hi,

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

 

thanks 

BSS-TekLabs
Shopify Partner
2350 688 806

Can you try this code @lesriches 

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

BSSTekLabs_0-1723044131245.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lesriches
Excursionist
30 0 10

lesriches_0-1723044966054.png

 

Hi ,

i need only the highlighted menu in center

thanks

BSS-TekLabs
Shopify Partner
2350 688 806
.shopify-section-group-header-group .header+.nav-bar .nav-bar__inner .container {
 text-align: center !important;
}

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2350 688 806

BSSTekLabs_0-1723045382657.png

@lesriches  like this?

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lesriches
Excursionist
30 0 10
Hi  BSS-TekLabs ,
Yes i need excatly same but the font should in bold .
thanks
Preview
 
 
 
BSS-TekLabs
Shopify Partner
2350 688 806
    .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 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lesriches
Excursionist
30 0 10

hi,

lesriches_0-1723046056569.png

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

thanks.

BSS-TekLabs
Shopify Partner
2350 688 806
    .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 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lesriches
Excursionist
30 0 10

hi,

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

thanks.

BSS-TekLabs
Shopify Partner
2350 688 806

This is an accepted solution.

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

Can you add more code @lesriches 

BSSTekLabs_0-1723047125602.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
lesriches
Excursionist
30 0 10

Thanks It's Working 

BSS-TekLabs
Shopify Partner
2350 688 806

Glad to help you. Have a good day.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now