robfeltrin Posted November 2, 2023 Share Posted November 2, 2023 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 Link to comment
tuanphan Posted November 4, 2023 Share Posted November 4, 2023 Hi, Which code did you use? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
robfeltrin Posted November 8, 2023 Author Share Posted November 8, 2023 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... Link to comment
robfeltrin Posted November 12, 2023 Author Share Posted November 12, 2023 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment