Jump to content

Centre logo with navigation either side of it

Go to solution Solved by weebluepress,

Recommended Posts

hi there

I'm trying to centre my logo with navigation options either side of it. There isn't an option for this in the standard header designs, so I'm assuming I'll need to insert some custom css to achieve it. Any advice would be greatly appreciated.

 

Thanks

Emma

central nav and logo.png

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

Top Posters In This Topic

(1) First, Change header layout to Left Menu – Middle Logo like below

Left Menu Middle Logo Right Menu 01 Min

(2) Use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().appendTo('.header-display-desktop .header-actions.header-actions--right');
})
</script>

This code will duplicate the Left Menu and add it to the Right Menu, and you will have.

Left Menu Middle Logo Right Menu 02 Min

(3) Use this code to Website > Website Tools > Custom CSS

/* Hide item 1, 2 from right menu */
.header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {
    display: none;
}
/* Hide item 3, 4 from left menu */
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {
    display: none;
}
/* add space between item 3, 4 in right menu */
  .header-nav-item:nth-child(n+3) {
    margin-right: 1.5vw;
}
/* fix items disappear */
div.header-nav-item a {
	opacity: 1 !important;
}
 
This code will hide items 3, 4 from the Left Menu.
And hide items 1, 2 from the Right Menu.
And add space between items 3, 4 in the Right Menu
You will have
Left Menu Middle Logo Right Menu 03 Min
(4) To move menu closer logo, you can use this code to Custom CSS, under #3 code
/* Move menu closer logo */
.header-actions.header-actions--right {
    justify-content: flex-start !important;
}
.header-nav-wrapper {
    text-align: right;
}
.header-nav nav.header-nav-list>div {
    margin-right: 0 !important;
    margin-left: 2.7vw !important;
}

 

 

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

Hi thanks so much for quick response. I've made the code suggestions and its definitely getting there, but the shopping cart is kind of in the way and it's uneven. I've fiddled around with the n+ numbers but I'm just hiding things. Sorry can you help again? 

central nav 2.png

Link to comment
On 4/29/2024 at 5:16 PM, weebluepress said:

Hi thanks so much for quick response. I've made the code suggestions and its definitely getting there, but the shopping cart is kind of in the way and it's uneven. I've fiddled around with the n+ numbers but I'm just hiding things. Sorry can you help again? 

central nav 2.png

Can you share site url? I can check problem 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
On 5/1/2024 at 4:50 PM, weebluepress said:

Thanks it's https://onion-bluebird-cy7n.squarespace.com/ 

pw EmmaDeerRed

 

Much appreciated. I've sorted the navigation items it is just the shopping cart I can't seem to do anything with.

Add this code to Website > Website Tools > Custom CSS

nav.header-nav-list {
    order: 1 !important;
}
.showOnDesktop {
    order: 2 !important;
}

 

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

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.