Jump to content

Custom split navigation in front of logo (z index not working)

Recommended Posts

Site URL: https://www.hellohubble.co.uk

I've added a split navigation to this site but the problem is that the nav bar appears to be over the logo meaning that half the logo is not responding to a cursor (i.e. it won't link to the homepage on the bottom half of the logo  - the top half works). I've inspected the elements and feel that the z index I have for the logo should work, however, it isn't working at all. Please can anyone help? 

password: HubblePreview

css used:

//split navigation//
  @media(min-width:800px){
.header-nav {
    position: absolute;
      top: 40%;
    bottom: 0;
    margin-top: 0!important;}
.header-nav-item:nth-of-type(2) {
    margin-right: 25vw!important;}
.header-title-logo a {
    z-index: 1000000000 !important;    position: relative;
  }}

 

Link to comment

We can use another approach to achieve this

  • First, use script code to duplicate nav & add it to right of logo
  • Next, use CSS code to hide item 3,4 from left nav, and hide item 1,2 from right nav

Do you use Business Plan? we can check & give the code

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 hours ago, tuanphan said:

We can use another approach to achieve this

  • First, use script code to duplicate nav & add it to right of logo
  • Next, use CSS code to hide item 3,4 from left nav, and hide item 1,2 from right nav

Do you use Business Plan? we can check & give the code

Hi @tuanphan

Yes, the website is on a business plan. I hadn't thought of that option, in the past the css I quoted above has worked (and is still working on other sites), so I'm a little confused as to why it isn't working this time. I've also tried far bigger z indexes but nothing is working.

Thanks,

Edited by HollyM
Link to comment

@tuanphan I've taken a different approach but now can't seem to move my social icons. I've split the nav using script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 2.0vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
  .header-nav-item a {
    color: #ffffff;
}
</style>

and css:

/* left right menu align */
.header-nav-wrapper {
    text-align: right;}

.header-actions.header-actions--right {
    justify-content: flex-start;}

I need my social icons to move to the right hand corner (screenshot attached) with decent spacing between them and the nav items. Any idea how I could achieve this please? Or, if I would be better using different script then I'll be happy to try it!!

Any advice would be greatly appreciated. Thanks,

Holly

 

 

Screenshot 2022-09-08 at 08.06.24.png

Link to comment
On 9/8/2022 at 2:09 PM, HollyM said:

@tuanphan I've taken a different approach but now can't seem to move my social icons. I've split the nav using script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile');
})
</script>
<style>
  .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;}
.header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;}
  .header-nav-item:nth-child(n+3) {
    margin-right: 2.0vw;
}
.header-actions.header-actions--right * {
    opacity: 1;
    transform: unset;
}
  .header-nav-item a {
    color: #ffffff;
}
</style>

and css:

/* left right menu align */
.header-nav-wrapper {
    text-align: right;}

.header-actions.header-actions--right {
    justify-content: flex-start;}

I need my social icons to move to the right hand corner (screenshot attached) with decent spacing between them and the nav items. Any idea how I could achieve this please? Or, if I would be better using different script then I'll be happy to try it!!

Any advice would be greatly appreciated. Thanks,

Holly

 

 

Screenshot 2022-09-08 at 08.06.24.png

I don't see social icons. Can you check?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.