Change only header and footer text color, Brooklyn

Solved
AbsüreClothing
Tourist
20 0 0

Hi, how do I change navigation menu text in the header (with icons) and the text in the footer only from black to white?  Without coding, I can only change the header text that will change also every other title in white and it doesn't work since my background is white as well. Here's the preview: https://wtmrdxhnou008lm3-2427486259.shopifypreview.com

 

P.S.: the header is ok on the home page only, when changing to other pages it turns black. 

0 Likes
AbsüreClothing
Tourist
20 0 0

And then, I might need to change the color of the background of the actual footer to black. 
I tried this code 

.site-footer {
  padding-bottom: $gutter;
background-color: #FFF;

But I get a white line between the footer and hero image, plus the hero image sliding dots are now in the footer... 


0 Likes
May
Shopify Staff
Shopify Staff
335 32 145

Hi, there!

 

This is May from Shopify.

 

Although I am not an expert in coding, I’ve done some testings on my test store to find out how to make this customization. Before making any edits to your code, I always encourage you to duplicate your theme, in case of any unintended results. Once you’ve done that, feel free to copy and paste the code below on the very bottom of ‘theme.scss.liquid’ file. To find this file, you’ll want to go to ‘Online store > Actions > Edit code’, then open up your ‘Assets’ folder.

 

/* Changing the navigation menu's font color to white. */
a.site-nav__link {
  color: #fff;
}

/* Changing the footer font color to white. */
.site-footer a, p {
  color: #fff;
}

/* Removing the white bar, which is the padding on top of the footer. */
.slick-slider {
  margin-bottom: 0px;
}

/* Changing your footer background to black, and add a top padding of 20px. */
.site-footer {
  background-color: #000;
  padding-top: 20px;
}

After you save the code, your navigation menu should be white throughout your store. Your footer should have a black background with white font color. It is important to note that once you make changes to ‘theme.scss.liquid’, you cannot revert back to older versions. Therefore, I strongly recommend making a duplicate. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts.

 

Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!

 

Kind Regards,

 

May

Shopify Support

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
AbsüreClothing
Tourist
20 0 0

Hey - 

 

that worked! Thank you so much. 

I don't know if it is related to list last bit of code, but now the body text is not black anymore but white, and changing it for the built-in editor will give no result.. any thoughts ?


0 Likes
AbsüreClothing
Tourist
20 0 0

Oh and in the mobile version the two dots of the sliders are still there. 

0 Likes
May
Shopify Staff
Shopify Staff
335 32 145

This is an accepted solution.

Hi, again!

 

Glad to hear that the code works other than the font colour and the dots on the footer. I'm sorry about that. I'm glad you found these issues, though. It looks like i was missing a few things in the code, my apologies. To fix the issue with the font colour, replacing this code: 

 

.site-footer a, p {
  color: #fff;
}

with

 

.site-footer a, .site-footer p {
  color: #fff;
}

should fix the issue. The two dots on your footer is a little bit of a tricky one since they are actually a part of your slider. You may have edited your code that made the dots to appear on your footer, but I found a way to remove them. Though I am not sure if this is the best approach, you can add 

 

.slick-dots {
    display: none !important;
  }

on the bottom of your 'theme.scss.liquid' file, and it should remove the dots both on desktop and mobile view.

 

Let me know how it goes! 

 

Cheers,

May
Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
AbsüreClothing
Tourist
20 0 0

That worked! Thank you so much!

0 Likes
AbsüreClothing
Tourist
20 0 0

P.S.: I have now issues with the padding below the footer, there is a white bar... I have tried a couple of  thing but nothing, it's still there


@May wrote:

Hi, again!

 

Glad to hear that the code works other than the font colour and the dots on the footer. I'm sorry about that. I'm glad you found these issues, though. It looks like i was missing a few things in the code, my apologies. To fix the issue with the font colour, replacing this code: 

 

.site-footer a, p {
  color: #fff;
}

with

 

.site-footer a, .site-footer p {
  color: #fff;
}

should fix the issue. The two dots on your footer is a little bit of a tricky one since they are actually a part of your slider. You may have edited your code that made the dots to appear on your footer, but I found a way to remove them. Though I am not sure if this is the best approach, you can add 

 

.slick-dots {
    display: none !important;
  }

on the bottom of your 'theme.scss.liquid' file, and it should remove the dots both on desktop and mobile view.

 

Let me know how it goes! 

 

Cheers,

May
Shopify Support


 

0 Likes
May
Shopify Staff
Shopify Staff
335 32 145

Hey again!

 

Glad you found the codes above helpful! I just visited your site again, and it looks like the white padding on your footer was from the Chat app you are using. When I did an inspect code on your store, there is a 'padding-bottom: 60px' on your <html> tag, which might be added by the app. I did find that adding this code on the bottom of your 'theme.scss.liquid' file helps remove the padding: 

 

html {
  padding-bottom: 0px !important;
}

However, if you find that adding this code interfere with the chat app or other pages on your site, you might want to contact the app developer directly for advice on best solution for this issue.

 

Let me know how it goes! 

 

Best Regards,

 

May

 

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
AbsüreClothing
Tourist
20 0 0

Hi, thanks for this! 
It works, there was just a typo in the code in the word "important" and I was going a bit mad for a while but it's working now! haha :) Don't you worry and thanks again. 

0 Likes