Jump to content

Menu Bar Customization

Recommended Posts

Site URL: https://jakejensen.squarespace.com/config/pages

I was just wondering how I could line up my menu items to be closer to the logo in the middle instead of to the edges of the screen. Since I've already done all that I can to make sure they are on the same line, I will need to use some CSS. I would need the left block of menu items to float right and the right block of menu items to float left. I don't even know what the menu items are listed in the CSS so I don't know how to tell it to float a certain way. I will include pictures of what I mean. Would anyone know how to do this?

685005140_ScreenShot2021-03-03at10_07_08AM.thumb.png.5e27d9634a736698a5f673ac2feb5357.png544492195_Copyof01-Details-Photo-Half-Back(1).thumb.png.78c1ba085f649b4666a1ac501095adb7.png

Link to comment
  • Replies 4
  • Views 524
  • Created
  • Last Reply
  • 2 weeks later...
On 3/10/2021 at 1:26 AM, JakeJensen11 said:

Hi. Add to Design > Custom CSS

/* Space between nav - logo */
[data-nc-container="bottom-left"] {
    justify-content: flex-end !important;
}
[data-nc-container="bottom-right"] {
    justify-content: flex-start !important;
}

image.thumb.png.2e789bdb118f07f982bd41a1a6fadd41.png

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
On 3/20/2021 at 1:38 AM, tuanphan said:

Hi. Add to Design > Custom CSS


/* Space between nav - logo */
[data-nc-container="bottom-left"] {
    justify-content: flex-end !important;
}
[data-nc-container="bottom-right"] {
    justify-content: flex-start !important;
}

image.thumb.png.2e789bdb118f07f982bd41a1a6fadd41.png

Perfect! That worked. Thank you so much!

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.