Responsive Menu and Split Navigation | 7.1

12 hours ago, tuanphan said:

Which code did you use to add Search bar on right of logo? I guess we will need to tweak that code

sure heres the code @tuanphan

I put this in footer

<!-- search into header  --->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script>
$(function(){
  let searchBlock = $('#block-yui_3_17_2_1_1686595653374_1657').attr('id','').addClass('header-search-bar');

 $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
  $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content'));
  })
  </script>

<!-- search into header  --->

css

.header-search-bar{
  margin: 0 0 0 2.5vw;
  @media(max-width:799px){
    display:none;
  }
}

20 hours ago, azubair653 said:

sure heres the code @tuanphan

I put this in footer

<!-- search into header  --->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script>
$(function(){
  let searchBlock = $('#block-yui_3_17_2_1_1686595653374_1657').attr('id','').addClass('header-search-bar');

 $(searchBlock).insertAfter($('.header-title-nav-wrapper'));
  $(searchBlock).clone().addClass('mobile-header-search-bar').appendTo($('.header-menu-nav-folder-content'));
  })
  </script>

<!-- search into header  --->

 

css

.header-search-bar{
  margin: 0 0 0 2.5vw;
  @media(max-width:799px){
    display:none;
  }
}

Change this line

$(searchBlock).insertAfter($('.header-title-nav-wrapper'));

to this

$(searchBlock).insertAfter($('.header-nav'));

Hi - another question on split navigation. I'd like to have the split navigation automatically resize and be centered vertically on the logo. Here's the site (business account):

innate-studio.com 

Thank you!

I'd also like to have equal spacing between the navigation elements. Thank you!

On 8/31/2023 at 4:18 AM, InnateStudio said:

I'd also like to have equal spacing between the navigation elements. Thank you!

It looks fine to me. Which screen sizes do you see problem?

@tuanphan can you help me with a similar issue?

I want the mobile menu to have the logo in the center, and I want to hide the hamburger and split the menu. there are only two menu items.

Here is the site and PW:
https://themainestage.squarespace.com/
backstage

Site is on Business plan

This is what I want it to look like. Menu Items at the side and the logo and tagline centered.

Hi Tuanphan. Thanks for this code, I used it and it works on desktop, but still showing on real mobile (on my phone, not just on squarespace mobile mode). Can you help? Thank you.

Site: https://youngharvestfarm.squarespace.com/

password: young

On 9/22/2023 at 12:04 AM, aquariusgarcelon said:

@tuanphan can you help me with a similar issue?

I want the mobile menu to have the logo in the center, and I want to hide the hamburger and split the menu. there are only two menu items.

Here is the site and PW:
https://themainestage.squarespace.com/
backstage

Site is on Business plan

This is what I want it to look like. Menu Items at the side and the logo and tagline centered.

 

 

Hi,

Do this on Mobile only or both desktop + mobile?

If mobile only, use this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
.header-display-desktop {
}

.header-nav {
    display: flex !important;
    width: 70px !important;
    flex: 0 0 70px !important;
    flex-direction: column !important;
}
.header-burger {
    display: none !important;
}
.header-nav-item.header-nav-item--collection:last-child {
    position: absolute;
    right: 0vw;
    z-index: 999999;
}
.header-title-logo {
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-title {
    max-width: 200px;
    flex: 1 0 70% !important;
    width: 70% !important;
}
}

On 9/23/2023 at 1:57 AM, laurenhauss said:

Hi Tuanphan. Thanks for this code, I used it and it works on desktop, but still showing on real mobile (on my phone, not just on squarespace mobile mode). Can you help? Thank you.

 

Site: https://youngharvestfarm.squarespace.com/

password: young

You mean remove menu items on mobile or what is problem?

3 hours ago, tuanphan said:

You mean remove menu items on mobile or what is problem?

Yes, I meant that I don't want those navigation titles (the ones between the shopping cart and the hamburger) to show in the top area on mobile. I want to see the hamburger nav only (and the navigation will show when the user clicks the hamburger instead). Thank you.

Nevermind, I figured it out! 

@media screen and (max-width:767px) {
.header-nav-list {
  display:none;
  }}

Thanks!

4 hours ago, tuanphan said:

Hi,

Do this on Mobile only or both desktop + mobile?

If mobile only, use this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
.header-display-desktop {
}

.header-nav {
    display: flex !important;
    width: 70px !important;
    flex: 0 0 70px !important;
    flex-direction: column !important;
}
.header-burger {
    display: none !important;
}
.header-nav-item.header-nav-item--collection:last-child {
    position: absolute;
    right: 0vw;
    z-index: 999999;
}
.header-title-logo {
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}
.header-title-nav-wrapper {
    flex: 1 0 100% !important;
}
.header-title {
    max-width: 200px;
    flex: 1 0 70% !important;
    width: 70% !important;
}
}

 

Thank you so much @tuanphan, this worked!

@tuanphan

HELP! I used this code for split navigation and it looks amazing, however on 2 of my pages (Services & Contact), the right 3 navigation items disappear. My client is adament about having it this way so I really need to be able to fix it. 

Website: www.laurenandalexisphoto.com

PW: lap123

On 10/7/2023 at 2:06 AM, SashaMiana said:

@tuanphan

 

HELP! I used this code for split navigation and it looks amazing, however on 2 of my pages (Services & Contact), the right 3 navigation items disappear. My client is adament about having it this way so I really need to be able to fix it. 

 

Website: www.laurenandalexisphoto.com

PW: lap123

It shows fine to me

On 10/6/2023 at 2:06 PM, SashaMiana said:

@tuanphan If you click on the photography page, the right three menu items are not at the top. Same for the contact page! I don't know why. 

On 10/6/2023 at 2:06 PM, SashaMiana said:

HELP! I used this code for split navigation and it looks amazing, however on 2 of my pages (Services & Contact), the right 3 navigation items disappear. My client is adament about having it this way so I really need to be able to fix it. 

 

Website: www.laurenandalexisphoto.com

PW: lap123

@tuanphan any thoughts on this? 

On 10/11/2023 at 11:03 PM, SashaMiana said:

@tuanphan any thoughts on this? 

Add this to Custom CSS box to make right items appear

/* make right 3 items appear */
.header-nav-item a {
    opacity: 1 !important;
}

@tuanphan for some reason that still didn't work 😞 

@tuanphan Nevermind, I added the <style> to the beginning and end and it worked!

Thanks! 

Sasha