Jump to content

Custom Navigation/Menu Background

Recommended Posts

This is a Squarespace 7.1 site, so if you are also using this version, you should be able to achieve this with a little custom CSS.

To change the navigation list you'll want to target the .header-nav-list class, using these selectors:

nav.header-nav-list {

}

For a 'bubble' effect you'll want to set the background-color to your choice of color, set some padding so there is space around the text, set a border (the example has a 1px solid border) and a border-radius for the rounded edges (the example has a 50px radius).

If you have any navigation folders (dropdowns) you'll also want to target the .nav-folder-content class to ensure that dropdowns also have the same style. For example, you could use these selectors:

.header .header-nav .header-nav-item--folder .header-nav-folder-content {

}

Again, you can set a border and a border-radius. Depending on your styling needs, you may also want to set alignment options.

As an example, to achieve this simple example...

image.gif.593f299023a3f69722d63bee260b22da.gif

...I used this...

nav.header-nav-list {
  background-color: #fefefe;
  border: 1px solid #333;
  border-radius: 50px;
  padding: 4px 20px;
}

.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  border: 1px solid #333;
  border-radius: 20px;
}

Is that what you wanted to do?

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
6 hours ago, wormie234 said:

Hey! 

Does anyone know how I could create a custom nav menu similar to this one? https://www.prettylittlemarketer.com

It looks fab and I've not seen a Squarespace nav look like this before! 

Do you want to create the menu bar like this?

Screenshot_141.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.