Costumizing header Titles Prestige

Solved
NZA
Pathfinder
105 12 32

Good day everyone..

I am trying to make a header similar to one store i saw and i can't figure out what code i need to change or what css to add

Here is my current header:

Luxury Cartel.png

This is the desired result:

web-design-finaa.png

I made the announcement bar the same but i can't figure out what i need to do to add the black line over the headings and make them lowercase. Please help !

Website ulr: https://luxury-cartell.myshopify.com/

Password: stoyol

Thank you very much in advance!

 

dmwwebartisan
Shopify Partner
7305 1723 2301

@NZA 

Please add the following code at the bottom of your assets/theme.css file.

@media screen and (min-width: 1140px){
.Header--center .Header__MainNav .HorizontalList a {
    color: #fff !important;
}
.Header--center .Header__MainNav .HorizontalList{  background-color: #000 !important; }
.Header--center .Header__MainNav{ padding-bottom: 6px !important;}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
NZA
Pathfinder
105 12 32

@dmwwebartisan Thank you for you help

When i addded the code that you provided this is what happens to the header

1.png

Any updates regarding this ?

dmwwebartisan
Shopify Partner
7305 1723 2301

@NZA 

I tried the same code with inspect element. Please see the result below. It worked.

header-menu.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
NZA
Pathfinder
105 12 32

@dmwwebartisan I have added the code and left it there now, you can see how it looks.

I am adding it to the bottom of the theme.css file

I their any information i can provide for a solution ?

dmwwebartisan
Shopify Partner
7305 1723 2301

@NZA 

Please don't add extra items to the top menu bar. I can see you added items if you add items on the top menu then it will go down.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
NZA
Pathfinder
105 12 32

@dmwwebartisan  What i added is a secondary menu, the one on the top right, in the theme you dont usually have this. I also changed the icons for the login and the cart.

Are these changes affecting the code ? Is there a reason it works on html editor and not inside the code ?

0 Likes
dmwwebartisan
Shopify Partner
7305 1723 2301

@NZA 

This given code works for the menu bar only that we made it black in color. For the other things on header, it needs to check and correct it via another code.

Hope you understand.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
NZA
Pathfinder
105 12 32

@dmwwebartisan  My intention is to only change the menu bar color. The main one with 8 titles.

I have trying implementing the code in 2 parts, the css that changes the color for the headings works but when i add the second part with the css for adding the black bar to the menu it glitches out.

Is there any way to make it happen with the changes to the header ? I'm not too good at this so i don't even  know if what im talking about is hard.

Would it be possible for you to help if i gave you access to the store ?

0 Likes
NZA
Pathfinder
105 12 32

This is an accepted solution.

This is the final code for it ( Bottom of the Theme.css file)

@media screen and (min-width: 1140px){
.Header--center .Header__MainNav {
    background: #000 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.Header--center .Header__MainNav .HorizontalList a {
    color: #fff!important;
    text-transform: capitalize;
}


}

 

I ended up with 2 margin on the top and right, this code will fix that 

.Slideshow__ImageContainer.AspectRatio>img, .Slideshow__ImageContain.no-js .AspectRatio>noscript img {
    top: -2px !important;
    left: -1.3px !important;
}

 

I will leave this here in case someone needs it. Cheers

0 Likes