customise mobile overlay menu - menu page numbers counter, adding text block and extra link, adding image, disable scroll

Hi there, I'm trying to customise my mobile overlay/dropdown menu.

- I have added an icon/image before the menu links/items.
- I have added extra information text after the links.
- I have also added a menu counter / numbered the menu page links/items. 

the problem

When you access the menu from the homepage, the numbered menu links display correctly. (next to the page title all on one line).
However, whenever I access the menu from any other page, the numbers display ontop of the page titles instead of next to. I am unsure what is causing this.

My second issue is that I want to move the extra information text block up more, closer to the page links, as it is currently not properly visible on the phone screen.  (- UPDATED SOLVED THIS ONE)

My third issue is that when I access the menu from any other page other than the homepage, I am also now able to 'scroll' down the whole page whilst the menu is open. This is undesirable and i wish to fix and disable the scroll. I do currently have the code: html, body {overflow-x:hidden;} used on the site to hide overflowing images on the sides as I am unable to get the code to work on the individual images. I. know this affects it, but i tried to counteract it with this code in footer injection:

<script>
$(document).ready(function() {
    $(".burger-inner").click(function() {
  $('html').toggleClass('disable-scroll');
});
});
</script>
<style>
  html.disable-scroll {
    overflow: hidden;
}
</style>

I also want to be able to add a 'HOME' link button just above this text, and under the menu page links. This would also require an active state.

--------

www.kathrynbraunton.co.uk

PW: makeup 

7.1 fluid engine, business plan

--------

Here is the current code i've used:

@media screen and (max-width: 767px) {

  
  //mobile sticky nav//
.header {
 position: fixed!important;
 z-index: 99!important;
background-color: #f1f0e9!important;
 }
  
  .header {
    padding-top: 0vw !important;
    padding-bottom: 0vw !important;
}
  
  
//mobile nav fonts//
  .header-nav *, nav.header-menu-nav-list * {
    font-family: 'noto-thin';
text-transform:uppercase!important;
    font-size: 1.1em;
   color:#161616;
}

  
  //mobile nav image logo insert//
  [data-folder="root"]:before {
    content: "";
    background-image: url(https://static1.squarespace.com/static/651597aec9935715037bdf4c/t/653bec50387d7d0d85945ed6/1698425936869/kathryn-icon1-olive-rgb-1080px-w-300ppi.png);
    display: block;
    width: 100px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    position: relative;
    bottom: -60px;
}
  
  //mobile nav link counter//
.header-menu-nav-item:before {
    content: "0" counter(menu-item-counter) "./";
    font-family: alma-mono;
    font-style: normal;
    font-weight: 400;
    font-size: .625rem;
    line-height: 1.2em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #1b1b1b;
    top: -10px;
    left: 65px;
}
 .header-menu-nav-item {
    counter-increment: menu-item-counter;
    position: relative;
}

  .header-menu-nav-folder[data-folder="root"]>div {
    counter-reset: menu-item-counter;
    justify-content: flex-start;
  top:15vh;
}

  
/* Nav item active font */
  .header-nav *, nav.header-menu-nav-list--active a  {
    font-family: 'noto-thin-italic'!important;
  text-transform: lowercase!important;
  
}

 
  //Mobile active link
:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
  font-family: 'noto-thin-italic'!important;
  text-transform: lowercase!important;
}
  

 
  //mobile menu extra text detail //
.header-menu-nav-folder:after {
   display: block;
   content: "KATHRYN BRAUNTON BRIDAL MAKEUP ARTISTRY - EST.2006 - SERVING SOUTH GLOUCESTERSHIRE & BEYOND";
  font-family:'alma-mono';
font-size:0.4em;
  line-height:1.5em;
  letter-spacing: 0.2em;
color: #1b1b1b;
  width:70%;
  margin:auto;
  }

 }

With 01, 02, 03, 04 order, you can add this code to Website Tools > Custom CSS

/* Fix numbers */
div.container.header-menu-nav-item {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

With disable scroll, you missed a jQuery library link

add this line to top of Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

You can add it first, then we can test other problems easier (add home link, move text up)

8 hours ago, tuanphan said:

With 01, 02, 03, 04 order, you can add this code to Website Tools > Custom CSS

/* Fix numbers */
div.container.header-menu-nav-item {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

With disable scroll, you missed a jQuery library link

add this line to top of Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

You can add it first, then we can test other problems easier (add home link, move text up)

Hi @tuanphan wow wow thank you so much for replying as always. Top code worked amazing, and I have now added the script into the header for you. I would love to know more about Jquery too if you had any resources on it. 

On 10/31/2023 at 12:21 AM, daniellenoakes said:

Hi @tuanphan wow wow thank you so much for replying as always. Top code worked amazing, and I have now added the script into the header for you. I would love to know more about Jquery too if you had any resources on it. 

Add to bottom of Code Injection > Footer

<script>
  $(document).ready(function(){
  $('<a href="/" class="home-link">Home</a>').appendTo('.header-menu-nav-wrapper');
});
</script>
<style>
  a.home-link {
    margin-top: 10px !important;
    display: block;
}
  .header-menu-nav-folder:after {
    position: relative;
    top: -150px;
}
</style>