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

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;
  }}

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

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,

@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

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

 

 

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

@tuanphan I had to hide them due to a website launch (the homepage looked bad with them in situ). I'm going to revisit this next week but imagine I'll have to pay someone to fix. Thanks for the offer of help though.

@tuanphan Could you assist me with similar please.

website is pretty-positive.co.uk (password if viewing before public again is 'levelup222')

I would like pretty positive site folder to stay on the left, and jksnmedia to move to the right. PP where it is, but the space between to make jksnmedia more under the social icons, probably so that the words end at the same lineup as the last instagram logo.

Is there also a way to make the pretty positive folder heading bold so it directs people there more?

Thank youuuuuuuuuu !!

On 2/9/2023 at 4:30 PM, prettypositivejksnmedia said:

@tuanphan Could you assist me with similar please.

website is pretty-positive.co.uk (password if viewing before public again is 'levelup222')

 

I would like pretty positive site folder to stay on the left, and jksnmedia to move to the right. PP where it is, but the space between to make jksnmedia more under the social icons, probably so that the words end at the same lineup as the last instagram logo.

 

Is there also a way to make the pretty positive folder heading bold so it directs people there more?

 

Thank youuuuuuuuuu !!

You mean Left Pretty Positive Site item - Middle Logo - Right JKSN Media Site/Icons/Cart?

On 2/11/2023 at 11:32 AM, tuanphan said:

You mean Left Pretty Positive Site item - Middle Logo - Right JKSN Media Site/Icons/Cart?

Yes, please, but the 'site' folders for both to still be on the line *below* the site title logo and social /cart etc 🙂

On 2/21/2023 at 12:20 AM, prettypositivejksnmedia said:

Yes, please, but the 'site' folders for both to still be on the line *below* the site title logo and social /cart etc 🙂

Can you change layout to Left Nav - Middle Logo - Right Icons/Cart? We will try testing some code.

If you can't do this on live site, you can duplicate the site & do there