How can I organise menu items horizontally?

Hiya! I've got the mobile menu forced on desktop. I would like to have the links to slide into the screen from the right, next to the hamburger icon, where the header is. 

It would essentially be a header with a burger that when you click, it slides the links in. 

I've managed to make it slide (code now removed) but cannot seem to find a way to organize the links horizontally one next to the other at the top of the page. 

Anyone with a CSS solution? 

https://www.towergateinsurance.co.uk/home-and-property/unoccupied-property-insurance

mmmarchitects

Thanks

Hi,

Which code did you use?

Oh I've removed it now, sorry. Would have to find another one if I can manage to have them pop up horizontally on the header...

On 11/4/2023 at 10:47 AM, tuanphan said:

Hi,

Which code did you use?

/* Move the overlay menu higher on the screen and to the left */
.header-menu-nav-list {
    bottom: 45.5%; /* Adjust this value to your preference */

}

/* Custom CSS for Mobile Menu on Desktop */
@media only screen and (min-width: 768px) {
  /* Adjust the min-width value according to your needs */

  .header-menu-nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 67vw;

  }
}

/* Remove space between menu items */
.header-menu-nav-item {
  margin-bottom: 0 !important; /* Remove any bottom margin */
}

/* Reduce space between menu items */
.header-menu-nav-item {
  align: right;
  margin-right: -75% !important;
  margin-left: 60%/* Adjust the right margin as needed */
}

/* Remove margin from the last item to prevent extra space */
.header-menu-nav-item:last-child {
  margin-right: -40%!important;
}

/* Move the overlay menu higher on the screen */
/*.header-menu-nav-list {
  bottom: 45.5%;} /* Adjust this value to your preference */

/* Reduce the height of the menu items */

/* Keep the menu items at the same height as the site title */
.header-menu-nav-wrapper {
  position: fixed;
  top: 41%; /* Adjust this value to center the menu vertically */
  transform: translateY(-50%);
}

@direction : right; // use left or right
  
  @duration-open : 0.6s;
  
  /*
  
    should the menu close with the same effect or blink; it's gone?
    
    use false or true
    
    */
    
  @close-effect : true;
  
  // make close effect a little shorter than open
  
  @close-duration-shorten-by : 0.2s; // set value to suit your needs
  
  /*
  
    reveal menu item by itself shows no visible effect. you have to use either
    a built-in reveal menu item effect or write a custom CSS effect
    
    */
    
  @reveal-menu-items : false;
  
  // begin ignored if @reveal-menu-items : false
  
    @reveal-menu-items-delay-step : 0.03s;
    
    @reveal-menu-items-effect-flyout : true;
    
    // end ignored if @reveal-menu-items : false
    
  // do not change anything below, there be the borg here
  
  // begin unset SS built-in menu effect
  
    @media only screen and ( pointer : coarse ) and ( max-width : 1024px ),
    screen and ( max-width : 799px )
    
      {
      
        .header-menu {
        
          opacity : unset;
          
          .transition-unset ( );
          
          visibility : unset;
          
          }
          
        }
        
    .header--menu-open .header-menu .header-menu-cta,
    .header-menu-actions,
    .header-menu-cta,
    .header-menu-nav-item a,
    .header-menu-nav-list,
    .header-menu,
    
      {
      
        opacity : unset;
        
        .transform-unset ( );
        .transition-unset ( );
        
        visibility : unset;
        will-change : unset;
        
        }
        
    /* end unset SS built-in menu effect */
    
  // begin move menu elements off screen
  
    .header-menu {
    
      -webkit-transition-property : -webkit-transform;
      transition-property : -webkit-transform;
      -o-transition-property : transform;
      transition-property : transform;
      transition-property : transform, -webkit-transform;
      
      will-change : transform;
      
      .close-effect ( @duration-open, @close-duration-shorten-by );
      .header-menu-direction-off ( );
      
      }
      
    .header-menu-nav-folder {
    
      .header-menu-nav-folder-direction-off ( );
      
      }
      
    .header-menu-actions,
    .header-menu-cta
    
      {
      
        .transition-delay ( @duration-open );
        
        }
        
    .header-menu-actions {
    
      .header-menu-actions-off ( );
      
      }
      
    .header-menu-cta {
    
      .header-menu-cta-off ( );
      
      }
      
    // end move menu elements off screen
    
  // begin move menu elements on screen
  
    .header--menu-open .header-menu {
    
      @d : @duration-open;
      @e : ease-out;
      
      .transition-duration ( @d );
      .transition-timing-function ( @e );
      .transform-unset ( );
      
      }
      
    .header-menu-nav-folder--active {
    
      .transform-unset ( );
      
      }
      
    .header--menu-open .header-menu .header-menu-actions {
    
      @d : @duration-open;
      @e : ease-out;
      
      .transform-unset ( );
      .transition-delay ( 0.5s );
      .transition-duration ( @d );
      .transition-timing-function ( @e );
      
      }
      
    .header--menu-open .header-menu .header-menu-cta {
    
      @delay : round( 0.5s + 0.03s, 3 );
      @duration : @duration-open;
      @e : ease-out;
      
      .transform-unset ( );
      .transition-delay ( @delay );
      .transition-duration ( @duration );
      .transition-timing-function ( @e );
      
      }
      
    // end move menu elements on screen
    
  // begin direction
  
    .header-menu-direction-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-direction-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-nav-folder-direction-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( 200% );
      
      }
      
    .header-menu-nav-folder-direction-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-nav-item-direction ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-nav-item-direction ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-actions-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-actions-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-cta-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-cta-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    // end direction
    
  // close menu effect, optional
  
  .close-effect ( @duration, @offset ) when ( @close-effect = true ) {
  
    @d : round( @duration - @offset, 3 );
    @e : ease-in;
    
    .transition-duration ( @d );
    .transition-timing-function ( @e );
    
    }
    
  .reveal-menu-items ( @duration-open, @reveal-menu-items-delay-step );
  
  // reveal menu items
  
  .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) {
  
    .reveal-menu-items-effect-flyout ( @duration-open );
    
    // reveal menu items effect flyout
    
    .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) {
    
      .header-menu-nav-item {
      
        .transition-duration ( @duration );
        .header-menu-nav-item-direction ( );
        
        }
        
      .header--menu-open .header-menu-nav-item {
      
        .transform-unset ( );
        
        }
        
      }
      
    @iterations : 32;
    
    .transition-delays ( @i ) when ( @i > 0 ) {
    
      .header-menu-nav-item:nth-child( @{i} ) {
      
        @d : round( @i * @step + ( @start / 2 ), 3 );
        
        .transition-delay ( @d );
        
        }
        
      .transition-delays ( @i - 1 );
      
      }
      
    .transition-delays ( @iterations );
    
    }
    
  // begin mixin utilities
  
    .transform-translate-x ( @value ) {
    
      -webkit-transform : translateX( @value );
      -ms-transform : translateX( @value );
      transform : translateX( @value );
      
      }
      
    .transform-unset ( ) {
    
      -webkit-transform : unset;
      -ms-transform : unset;
      transform : unset;
      
      }
      
    .transition-delay ( @delay ) {
    
      -webkit-transition-delay : @delay;
      -o-transition-delay : @delay;
      transition-delay : @delay;
      
      }
      
    .transition-duration ( @duration ) {
    
      -webkit-transition-duration : @duration;
      -o-transition-duration : @duration;
      transition-duration : @duration;
      
      }
      
    .transition-timing-function ( @easing-function ) {
    
      @e : @easing-function;
      
      -webkit-transition-timing-function : @e;
      -o-transition-timing-function : @e;
      transition-timing-function : @e;
      
      }
      
    .transition-unset ( ) {
    
      -webkit-transition : unset;
      -o-transition : unset;
      transition : unset;
      
      }
      
    // end mixin utilities
    
  // end mobile menu left flyout

I'm now here with it, everything is in place, but the area where you click on the links is set too low and I cant seem to move it up to place. Any idea what I can do? 

I also need to be able to click on the main page behind the menu while it's open.

Not sure what to do anymore...

https://violin-halibut-2csa.squarespace.com/

mmmarchitects