Drop down menu to not take up entire screen(on mobile)

[jlarchitect]

Hello,

I’m hoping this is can be changed by simply adding a bit in Customise > Additional CSS. For previous adjustments that you’ve helped me with, I was given CSS to use. it utilizes @media (max-width). So I’m hoping in order to adjust the mobile version further, I just have add something in there.

On the mobile device, since it does not have enough space, the links in the menu ‘collapse’ into the hamburger button (Specifically span.navi-trigger, I believe). This is good. However, when you click it, the menu (div.menu-panel-inn, I think) covers the entire screen. Is there a way to adjust how much of the screen it takes up and the layout of the links so that they aren’t just one column on mobile devices?

Many thanks,

JL

[SeaTheme]

Hi,

I don’t understand what you want to change, I suggest you paste a screenshot, thanks!

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[jlarchitect]

Nothing to change in this state: just showing you what it looks like normally:
before clicking hamburger navigation trigger

Is there a way to shorten the the drop down menu since it covers the entire screen?
navigation menu covers entire screen

Not as important, but I was wondering how to make it remain fixed at the top right underneath the header(or replace the header possibly) and have it not scroll back to the top of the page:
navigation menu is not in a fixed position

[SeaTheme]

Hi,

Is there a way to shorten the the drop down menu since it covers the entire screen?

please go to Appearance > Customize, paste the custom css code to “Additional CSS” box.
the 50vh means 50% of screen height, the default is 100vh

@media (max-width: 768px) and (orientation: portrait) {
.menu-panel-inn { 
    height: 50vh;}
#menu-panel {
    -webkit-transform: translateY(-50vh);
    -moz-transform: translateY(-50vh);
    -ms-transform: translateY(-50vh);
    transform: translateY(-50vh);}
.show_mobile_menu:not(.navi-show-icon) #wrap, .show_mobile_menu.ux-mobile.navi-show-icon #wrap {
    -webkit-transform: translateY(50vh);
    -moz-transform: translateY(50vh);
    -ms-transform: translateY(50vh);
    transform: translateY(50vh); }
}

but I was wondering how to make it remain fixed at the top right underneath the header(or replace the header possibly) and have it not scroll back to the top of the pag

It is not possible by the simple CSS, it needs to change JS codes.

[jlarchitect]

Is there a way to specify which pages this would take effect?

[SeaTheme]

Add the page id like:

@media (max-width: 768px) and (orientation: portrait) {
.page-id-123 .menu-panel-inn,
.page-id-124 .menu-panel-inn { 
    height: 50vh;}
.page-id-123 #menu-panel,
.page-id-124 #menu-panel {
    -webkit-transform: translateY(-50vh);
    -moz-transform: translateY(-50vh);
    -ms-transform: translateY(-50vh);
    transform: translateY(-50vh);}
.page-id-123 .show_mobile_menu:not(.navi-show-icon) #wrap, 
.page-id-123 .show_mobile_menu.ux-mobile.navi-show-icon #wrap,
.page-id-124 .show_mobile_menu:not(.navi-show-icon) #wrap, 
.page-id-124 .show_mobile_menu.ux-mobile.navi-show-icon #wrap {
    -webkit-transform: translateY(50vh);
    -moz-transform: translateY(50vh);
    -ms-transform: translateY(50vh);
    transform: translateY(50vh); }
}

How to find page/post id?
https://seatheme.net/forums/topic/how-to-find-wordpress-postpage-id/

[Author]

Posts