Jump to content

Nav Drop Down Menu Styling -- Page Specific Background

Recommended Posts

Site URL: https://www.urbanpawspets.com/

Hey Guys, 

I have added some custom CSS code to style the navigation drop down menus. The problem I am running into is: on the HOME page the dropdown and menu header has white text (and looks good with a semi-opaque dropdown background). When I move to a different page on the site, the menu header has blue text. 

Is there a way to customize the background of the drop-down menu in relation to the "design theme" or specific to a certain page? So the home page with white text has a XXX background, and the other pages with blue header text have a YYY background? 

Thank you. 

Link to comment
  • Replies 3
  • Views 288
  • Created
  • Last Reply

@tuanphanI have not solved this yet -- just decided on a gradient background that works for both spaces and the changing text color on each page. 

I do have another question -- I have a home page with: 

<picture1> <text 1 & button> 

<text 2 & button> <picture2>

<picture3> <text 3 & button> 

Looks great on desktop, but mobile the order is messed up. I would prefer to have all three photos above the text. I know squarespace does this because it reads left to right and stacks blocks accordingly on mobile. What is a good code to swap the order of text 2 and picture 2 on mobile so it stacks the picture first? I've tried some custom codes and can't get it to work. 

Thanks! 

Link to comment
On 12/10/2020 at 12:38 AM, manningry said:

@tuanphanI have not solved this yet -- just decided on a gradient background that works for both spaces and the changing text color on each page. 

I do have another question -- I have a home page with: 

<picture1> <text 1 & button> 

<text 2 & button> <picture2>

<picture3> <text 3 & button> 

Looks great on desktop, but mobile the order is messed up. I would prefer to have all three photos above the text. I know squarespace does this because it reads left to right and stacks blocks accordingly on mobile. What is a good code to swap the order of text 2 and picture 2 on mobile so it stacks the picture first? I've tried some custom codes and can't get it to work. 

Thanks! 

Hi. I've solved thousands of questions like that. If you share link to page in this question, we can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.