How to Move the Nav in Bedford: Squarespace Customization {Video}

We were asked recently by one of our clients who is using the Bedford theme in Squarespace if their navigation menu could be moved below the banner.

Unfortunately there is no option in the Design Editor for this capability, but with some CSS it is possible to move your navigation under the banner on your pages in desktop view.

When trying to solve a problem like this I like to use Google Chrome's Inspect tool to locate the HTML element I need to target and it's super easy to use.

Step 1: Locate HTML Element

First open your website in Google Chrome and take a look at the current position of the menu. You need to be working in desktop view and not mobile. Move your mouse over the 1st item in your menu, right click and select Inspect.

The Console will open up and you will see your HTML code. What you need to look for is the main container for the navigation, which should look something like:

<div id="headerNav"></div>

If you hover over the elements in the HTML code you will see they become highlighted, which is a great way to know if you have targeted the right element.

Step 2: Edit Element CSS

I love to work from the Inspect tool in Google Chrome as it allows me to make live edits without making them permanent. Perfect for testing purposes!

Now that we have located the navigation element to move we need to apply the right CSS to move it. In the screen shot above you will see the element's current CSS is:

@media only screen and (min-width: 641px)
#header #headerNav {
    text-align: right;
}

Click the mouse at the end of the ; and a new line will appear. Add the additional code so the CSS now looks like:

@media only screen and (min-width: 641px)
#header #headerNav {
    text-align: right;
    position: relative;
    top: 484px;
}

Note: Depending on the height of your banner you may need to adjust top: 484px to something more relevant to your styling.

Step 3: Make the CSS Changes Live

Go ahead and copy your new CSS for the element and head on over to Custom CSS in the Design menu of Squarespace. Paste the code in and your changes should now be live.

And there you have it! Your menu in desktop view is now below the banner in Squarespace's Bedford theme.

Now you may need to add addition styling to position the navigation how you want and make necessary colour changes, but these are fairly straight forward to do, but if you have any questions feel free to leave a comment below and we will get back to you.