Change Navigation Menu Text Color

New Member
7 0 0

Hi,

I'm using the template Brooklyn and i have an issue with the navigation menu text color. I have changed the position of the hero slide using this code to move down the slide.

.hero__header {
  position: relative;

 

But since the slide is dark color, the text used should be in white so everything font in header become white color, Now I need the navigation menu text color to be in #1c1d1d but I can't find any effective solution for the problem. All the related discussion is not functioned for current version of Brooklyn.T^T

I was troubled by this problem all day but still cannot find the solution. Also, how to make more than 4 navigation link  in header but not turn into hamburger menu?

Thanks!

http://daddyphones.com

0 Likes

Hi,

The Brooklyn theme has the default text color of the Home page header (store name, menu links) that is the same as the the Slideshow text color (only if the slider contains images, otherwise the global heading text color will be set for all your store). You should do the following:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Choose "Edit code" from the "Actions" drop-down menu.
  3. On the Edit HTML/CSS page, you can edit the sections / slideshow.liquid file.
  4. You should find the following lines in the file (the code should be not far from the 31st line):

<style>
{% if section.blocks.size > 0 %}
.site-navlink, .site-headerlogo a, .site-navlink:hover, .site-headerlogo a:hover {
color: {{ section.settings.slide_text_color }};
}
.burger-icon {
background: {{ section.settings.slide_text_color }};
}
{% else %}
.site-navlink, .site-headerlogo a, .site-navlink:hover, .site-headerlogo a:hover {
color: {{ settings.color_headings }};
}
.burger-icon {
background: {{ settings.color_headings }};
}
{% endif %}
</style>

change code to:
 

<style>
{% if section.blocks.size > 0 %}
.site-navlink, .site-headerlogo a, .site-navlink:hover, .site-headerlogo a:hover {
color: #1c1d1d;
}
.burger-icon {
background: #1c1d1d;
}
{% else %}
.site-navlink, .site-headerlogo a, .site-navlink:hover, .site-headerlogo a:hover {
color: {{ settings.color_headings }};
}
.burger-icon {
background: {{ settings.color_headings }};
}
{% endif %}
</style>

Also by default, if the main menu is wider than parent, the js code switches it to mobile nav (hamburger icon), so you can do the following:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Choose "Edit code" from the "Actions" drop-down menu.
  3. On the Edit HTML/CSS page, you can edit the Assets / theme.js.liquid file.
  4. You should find the following lines in the file (the code should be in 3054th line) and comment / delete this code:

// if (navItemWidth > navWidth) {
// theme.cache.$siteNav.addClass('site-nav--compress');
// theme.cache.$siteNav.parent().removeClass('large--two-thirds').addClass('large--one-sixth');
// theme.cache.$siteNavOpen.addClass('site-nav--opendisplay');
// theme.cache.$siteNavOpen.parent().removeClass('large--hide');
// theme.cache.$logoWrapper.parent().removeClass('large--one-third').addClass('large--two-thirds');
// theme.cache.$logoWrapper.removeClass('large--left').addClass('text-center');
// } else {
// theme.cache.$siteNav.removeClass('site-nav--compress');
// theme.cache.$siteNavOpen.removeClass('site-nav--opendisplay');
// theme.cache.$siteNavOpen.parent().addClass('large--hide');
// }

 

Regards,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
7 0 0

O M G !!!

It's WORK !!!

You're AWESOME!!!!!!!

THANK YOU SO MUCH!!!!!!!!!!

 

0 Likes
New Member
7 0 0

Hi, now I have successfully edited the things,

When I scrolled down a bit the homepage, there is a gray area occured between the slide and the banner, can it be solved btw?

I don't know how to upload picture here... ^^''' Hope that you can see the picture from the link.

http://cdn.shopify.com/s/files/1/2537/5176/files/Untitled.png?v=1510674920

THANKS,

 

0 Likes

Hi,
If you want the parallax effect to be active for the image, you just need to remove background for each slide.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Choose "Customize" -> "Slideshow" section.
  3. On the Overlay block, set opacity to 0 (see attached).

http://dl4.joxi.net/drive/2017/11/15/0021/3582/1428990/90/438c020057.jpg

 

By the way, you have previously written that you have changed style code to ensure that the header was no placed on the slider

.hero__header {
  position: relative;
}

You can also do it otherwise. There is possibility that this class is used elsewhere, so you can change the variable to avoid inconsistencies:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Choose "Edit code" from the "Actions" drop-down menu.
  3. On the Edit HTML/CSS page, you can edit the sections / header.liquid file.
    You should find the following lines in the file (the code is about 13 line):
{% assign hero_full_height = false %}

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
7 0 0

Wow, I can't thank you enough for this.

Facing another problem now TT

In mobile version, the text on the slide is not centered T^T

This is the link to the screenshot of the mobile ver: https://ibb.co/dOkxNm

And how can I adjust the font size for only mobile version? The font size is too big on mobile. I need to change for heading and sidebar menu.

0 Likes
Highlighted

Hi,
Yes, you can adjust the font size only for mobile version. This bug has appeared because of the big size of the text and the title "DADDYPHONES" can not be split into two parts. In order to reduce the size of the text follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Choose "Edit code" from the "Actions" drop-down menu.
  3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
  4. You should find the following lines in the file (the code is about 2266 line):
/================ Font sizes ================/
.heroslide {
.herotitle {
font-size: em(50px);
}

.hero__subtitle {
font-size: em(15px);
}

@include at-query($min, $postSmall) {
.hero__title {
font-size: em(60px);
}

.hero__subtitle {
font-size: em(18px);
}
}

@include at-query($min, $large) {
.hero__title {
font-size: em(64px);
}
}
}

and change this line -

font-size: em(50px);

to the less meaning, for example - 

font-size: em(36px);

I hope it helps!

Regards,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
1 Like
New Member
7 0 0

You saved my life.

Each of your answer works like a charm. I believe others can also benefit from it.

THANK YOU, Arthur!

0 Likes
New Member
1 0 0

I'm just learning on a trial but I thought you didn't need to know code.  Especially for something so simple as changing color.

0 Likes