Spacing of Menu

Site URL: http://www.labelle-artistry.com

Hello-

I'm having some trouble with my split nav menu.  I have to build in extra space on the right side of my logo to get the nav to look even, and on some devices it looks completely off.  Can anyone help provide coding that will allow me to split the nav and maintain the block for the BOOK NOW button?  Right now I have this in my custom CSS (not even sure if all of this is relevant).

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 50px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(4) {
    margin-right: 525px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

header#header [href="/book"] { background: #084d68; color: white; padding: 10px; } nav.header-nav-list { align-items: center; }

Thank you!

Lindsay

Hi. DO you use Business or Commerce Plan?

Hi-

This is a business plan.

Thank you!

Hi! Just wanted to follow up to see if you might be able to help.  I also noticed when you view on an iPad and turn horizontally the whole menu is messed up with the second half of the menu dropping to the next line. 

Any help that you can provide would be immensely appreciated! 

Thank you!

Is your site live or still under construction?

Can you remove code (to create left-right menu) & change header layout to Nav (left) - Logo (center)? 

I will give new code to add left/right menu

Hi! Yes my website is live.  Can you please just tell me which code to remove, or is it all of it that I sent previously? I'd like to remove and add the new one all at the same time since the site is live.

Thank you!

Lindsay

12 hours ago, LindsayMcconnell said:

Hi! Yes my website is live.  Can you please just tell me which code to remove, or is it all of it that I sent previously? I'd like to remove and add the new one all at the same time since the site is live.

Thank you!

Lindsay

You can duplicate the site, change layout there & share duplicated site url. We can test code easier. 

Thank you!  Here is the duplicate site for us to test the code.

• The website URL is: magnolia-violet-25cn.squarespace.com
• Password is: labelle

Thank you for your help!

On 7/23/2021 at 10:58 PM, LindsayMcconnell said:

Thank you!  Here is the duplicate site for us to test the code.

• The website URL is: magnolia-violet-25cn.squarespace.com
• Password is: labelle

Thank you for your help!

 

 

Hi. Can you change header layout to this style: Nav (left) - Logo (middle)?

This has been completed. Thank you!

14 hours ago, LindsayMcconnell said:

This has been completed. Thank you!

Add to Settings > Advanced > Code Injection > header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var _0x2a83=['100017Kwgakl','clone','230022RvftGH','462552hCJEuW','542362HJtRsQ','7WSdNgn','insertAfter','177767eLtmhg','602656EjldxK','1dpsgOw','1jmmrpI','564626moilSz'];function _0x1751(_0x5a3e98,_0x51f93c){return _0x1751=function(_0x2a8347,_0x1751eb){_0x2a8347=_0x2a8347-0x1bd;var _0x452734=_0x2a83[_0x2a8347];return _0x452734;},_0x1751(_0x5a3e98,_0x51f93c);}(function(_0x24f638,_0x2a548d){var _0x50afa6=_0x1751;while(!![]){try{var _0x24c33f=parseInt(_0x50afa6(0x1c6))*parseInt(_0x50afa6(0x1c8))+-parseInt(_0x50afa6(0x1bf))+-parseInt(_0x50afa6(0x1c7))*parseInt(_0x50afa6(0x1c4))+-parseInt(_0x50afa6(0x1c5))+-parseInt(_0x50afa6(0x1c0))+parseInt(_0x50afa6(0x1c1))+-parseInt(_0x50afa6(0x1c2))*-parseInt(_0x50afa6(0x1bd));if(_0x24c33f===_0x2a548d)break;else _0x24f638['push'](_0x24f638['shift']());}catch(_0x5cb92b){_0x24f638['push'](_0x24f638['shift']());}}}(_0x2a83,0x5191e),jQuery(document)['ready'](function(_0x36b14f){var _0x37fa0e=_0x1751;_0x36b14f('.header-display-desktop\x20nav.header-nav-list')[_0x37fa0e(0x1be)]()[_0x37fa0e(0x1c3)]('.header-actions.header-actions--right>.showOnMobile');}));
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+5) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+6) {display: none;}
  .header-nav-item:nth-child(n+6) {
    margin-right: 1.5vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
</style>

Thank you so much!  On an iPad will this correct the spacing issues as well?  I really do not want the book now button to drop to the next line.

Your help and expertise is so appreciated!

Thank you! 

Hi again-

One other question- is there a way to move the menu items closer to the logo, giving more space on the left and right of the menu items? It feels like they are pushed too far to the edge of the page.

Thank you!!

18 hours ago, LindsayMcconnell said:

Hi again-

One other question- is there a way to move the menu items closer to the logo, giving more space on the left and right of the menu items? It feels like they are pushed too far to the edge of the page.

 

Thank you!!

Add to Design > Custom CSS

nav.header-nav-list {
    justify-content: flex-end;
}

Thank you again! I moved all the coding over to the live page www.labelle-artistry.com and the menu items are still very far to the sides.  Do you know how I would move them over toward the center of the page?

Thank you!

Lindsay

On 8/2/2021 at 4:07 AM, LindsayMcconnell said:

Thank you again! I moved all the coding over to the live page www.labelle-artistry.com and the menu items are still very far to the sides.  Do you know how I would move them over toward the center of the page?

 

Thank you!

Lindsay

 

Try removing space within image

also, then upload new image, then let me know. We give some other code to reduce left spacing