Home Forums Art WordPress Theme Drop down menu to not take up entire screen(on mobile)

This topic contains 5 replies, has 2 voices, and was last updated by  BWSM 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #14940

    jlarchitect
    Participant

    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

    • This topic was modified 3 months, 1 week ago by  jlarchitect.
    #14946

    BWSM
    Keymaster

    Hi,

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

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #14953

    jlarchitect
    Participant

    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

    • This reply was modified 3 months ago by  jlarchitect.
    • This reply was modified 3 months ago by  jlarchitect.
    #14956

    BWSM
    Keymaster

    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.

    #14978

    jlarchitect
    Participant

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

    #14979

    BWSM
    Keymaster

    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://www.uiueux.com/forums/topic/how-to-find-wordpress-postpage-id/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.