Jump to content

Add a button to a link in the navigation without affecting dropdown menus in 7.0

Go to solution Solved by Lesum,

Recommended Posts

The password is

EHHFnew

I have only injected 3 items of custom CSS into my 7.0 site. The last CSS entry is intended to turn the link to a DONATE page on the top right navigation into a blue button. It worked but then I discovered that the last item on each of the drop down menus is also now in a blue button – which looks terrible. What is the correct CSS for the DONATE button only? Thank you!

 

Screenshot BUTTON BLUE.png

Screenshot MENU DROPDOWN 3.png

Screenshot MENU DROPDOWN 2.png

Screenshot MENU DROPDOWN 1.png

Link to comment
  • Replies 6
  • Views 138
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

@buchananfl Hi! First, remove this block of code that you've added:

 
.Header-nav a:last-child {
    background: #36c;
    color: #fff !important;
    padding: .9rem 1.4rem !important;
}

Then add this block of code to fix the issue:

.Header-nav a:not(.Header-nav-folder-item):last-child {
    background: #36c;
    color: #fff !important;
    padding: .9rem 1.4rem !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • Solution

@buchananfl Did you delete this code first?

.Header-nav a:last-child {
    background: #36c;
    color: #fff !important;
    padding: .9rem 1.4rem !important;
}

This block of code is still on your site. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.