Jump to content

How to target header bar on Search page

Recommended Posts

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

81766734_ScreenShot2022-11-04at11_25_49am.thumb.png.c4e00c91be6c82b6633c6882c0b3dff2.png752972896_ScreenShot2022-11-04at11_25_55am.thumb.png.0f52a38f7332fd490de1308788fa451d.png

Link to comment
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

81766734_ScreenShot2022-11-04at11_25_49am.thumb.png.c4e00c91be6c82b6633c6882c0b3dff2.png752972896_ScreenShot2022-11-04at11_25_55am.thumb.png.0f52a38f7332fd490de1308788fa451d.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.b4e956c9b1e8c3ced58f00201a466c67.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

My testing

image.thumb.png.b4e956c9b1e8c3ced58f00201a466c67.png

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:

 

IMG_7233.PNG

Link to comment
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:

 

IMG_7233.PNG

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

Link to comment

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

image.thumb.png.8c06556668b3c629ebd44e6152ee983b.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.