How to target header bar on Search page

Hello again

Another problem I can't figure out.

On my site's search page, the site title and the nav menus are black, which is great. However, in mobile views, they turn white. See screenshots below.

I would like the header in mobile view (including the site title, the search icon, and the hamburger) to be black even in mobile view.

I've tried the following code where the ID is the page ID, but it doesn't seem to work.

@media only screen and (max-width: 639px) {
#yui_3_17_2_1_1667520860426_84 .has-site-title .Mobile-bar-branding {
color: #212121 !important;
}
}

If anyone can help, I would be so thankful.

https://www.unravelyourphotos.squarespace.com/search
Password: uyp2022

Thank you,
Rhonda

On 11/4/2022 at 7:28 AM, rhondahymason said:

Hello again

Another problem I can't figure out.

On my site's search page, the site title and the nav menus are black, which is great. However, in mobile views, they turn white. See screenshots below.

I would like the header in mobile view (including the site title, the search icon, and the hamburger) to be black even in mobile view.

I've tried the following code where the ID is the page ID, but it doesn't seem to work.

@media only screen and (max-width: 639px) {
#yui_3_17_2_1_1667520860426_84 .has-site-title .Mobile-bar-branding {
color: #212121 !important;
}
}

If anyone can help, I would be so thankful.

https://www.unravelyourphotos.squarespace.com/search
Password: uyp2022

Thank you,
Rhonda

You can try adding to Home > Design > Custom Css

.has-site-title .Mobile-bar-branding {
  color: #000;
}
.Mobile-bar-search, .Mobile-bar-menu {
  stroke: #000 !important;
}

Support me by pressing 👍  or marking as solution if this useful for you

My testing

On 11/5/2022 at 8:46 PM, bangank36 said:

My testing

Hi @bangank36, Thanks for testing and getting back to me!

When I used the code, I got the header and hamburger to change to black, but not the search icon?

Also, the problem I have now is that on the other pages the header/hamburger is black, but I need the header/hamburge/icon to remain white on the other pages since they are overlaid on an image.

I've attached a screenshot so you can see what I mean:

1 hour ago, rhondahymason said:

Hi @bangank36, Thanks for testing and getting back to me!

When I used the code, I got the header and hamburger to change to black, but not the search icon?

Also, the problem I have now is that on the other pages the header/hamburger is black, but I need the header/hamburge/icon to remain white on the other pages since they are overlaid on an image.

I've attached a screenshot so you can see what I mean:

 

Can you add my code on your Custom Css so I can check the code for this page.

For the white color navigation, can you share the URLs to these page?

3 minutes ago, bangank36 said:

Can you add my code on your Custom Css so I can check the code for this page.

For the white color navigation, can you share the URLs to these page?

Done. The pages are:

/hello

/about

etc.

However, it wouldn't be feasible to target those pages specifically because all my blog pages will also use the same format of the full-width images at the top.

It seems that you have already added the code to set search icon with white color

Therefore, my code can not overwrite it. You can check it again

For setting the white color on some page, you can set the page Id on css code

/* header on /hello page*/
#collection-6323e55f2e837e0192f0ddbd {
	.Mobile-bar-branding {
		color: #fff !important;
	}
	.Mobile-bar-search {
		stroke: #fff !important;
	}
	.Mobile-bar-menu {
		stroke: #fff !important;
	}
}

/* header on /about page*/
#collection-635f3b47af27cb471ae0c467 {
	.Mobile-bar-branding {
		color: #fff !important;
	}
	.Mobile-bar-search {
		stroke: #fff !important;
	}
	.Mobile-bar-menu {
		stroke: #fff !important;
	}
}

You can get page Id on your own with the following extension Squarespace ID Finder

How to get Page Id: http://recordit.co/qwnj09oNCa

Hope that can help

4 hours ago, bangank36 said:

It seems that you have already added the code to set search icon with white color

Therefore, my code can not overwrite it. You can check it again

That makes sense! Thank you!

3 hours ago, bangank36 said:

For setting the white color on some page, you can set the page Id on css code

/* header on /hello page*/
#collection-6323e55f2e837e0192f0ddbd {
	.Mobile-bar-branding {
		color: #fff !important;
	}
	.Mobile-bar-search {
		stroke: #fff !important;
	}
	.Mobile-bar-menu {
		stroke: #fff !important;
	}
}

/* header on /about page*/
#collection-635f3b47af27cb471ae0c467 {
	.Mobile-bar-branding {
		color: #fff !important;
	}
	.Mobile-bar-search {
		stroke: #fff !important;
	}
	.Mobile-bar-menu {
		stroke: #fff !important;
	}
}

You can get page Id on your own with the following extension Squarespace ID Finder

How to get Page Id: http://recordit.co/qwnj09oNCa

Hope that can help

Thank you. I think what I might do is to try and redirect the Search icon to a specific page instead. I'll wait till you have time to reply to my other post about potentially using javascript to do this?

Thank you again, @bangank36. Really appreciate your help.