- This topic has 3 replies, 2 voices, and was last updated 4 months ago by
spiros.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
May 3, 2024 at 9:55 am #335166
spiros
ParticipantHello. how could I convert the existing hamburger menu to a curtain menu ONLY IN MOBILE VIEW ???
May 3, 2024 at 9:58 am #335167spiros
ParticipantHello. How I could convert the existing hamburger menu into a curtain menu ONLY IN MOBILE VIEW ?
May 6, 2024 at 2:06 am #335211minal
KeymasterHello Spiros,
To achieve curtain menu feat you have to add CSS in additional CSS section, To go to additional CSS, first open you dashboard and from there go to Appearance >> Customizer, you will find additional CSS section and paste the following CSS
@media screen and (max-width: 576px) { .site-header-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); position: absolute; top: 100%; left: 0; -webkit-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: 9999; background: #fff; width: 100%; padding: 25px; } .site-header-menu.toggled-on { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .main-navigation { height: 80vh; overflow-y: auto; scrollbar-width: none; } .site-header-menu.toggled-on { position: absolute; } }
Hope it work as per your need.
Sincerely,
Minal
May 6, 2024 at 4:41 am #335218spiros
ParticipantThank you very much for your reply.
I reduced the height to 45vh because it leaves too much white space below the menu -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.