Black Screen Issue: Please update your theme to ensure WordPress 5.6 compatibility. Dentalia 2.1 and Recycle 2.1 are now available on ThemeForest. 

Okay
  Public Ticket #1721354
Mobile Layout
Closed

Comments

  • mstapletondds started the conversation

    Is there anyway to change the position of the navigation button on mobile? I would like it to be on the right side instead of right below. 

    Also the header is sticky when scrolling on the desktop but not on the mobile. Any suggestions?

    Thanks

  •  531
    OrionThemes replied

    Hi,

    Sorry, but there is no such option. 
    You could of course style it with a bit of CSS. This CSS snippet can get you started:

    @media (max-width: 991px) {
    header.header-classic .to-x {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 111;
    }
    }

    Paste it in the Theme Options -> Custom CSS and adjust it as needed.

    Kind regards,
    Andrej

  • mstapletondds replied

    Ok I can mess around with that to make it work. 

    Is there any way on mobile to make the header section with my logo smaller in the vertical dimension and make it sticky when scrolling as well?

  •  531
    OrionThemes replied

    Saadly there is no sticky header on mobile on Dentalia.

    I personally like a huge phone in my hand, but there are many who have really small devices and when the sticky header takes one third of the available screen space, reading the content of web page on such device can be a painful experience. Saving the screen space is the main reason why we didn't implement a sticky header for mobile devices. And we do not recommend to use it either.

    It is however possible to make the sticky header visible on mobile too with some CSS. The CSS below might be a good start, but it does require some additional styling for sure. 

    @media (max-width: 991px) {
    header.stickymenu {
    z-index: 11;
    width: 100%;
    }
    header.stickymenu .nav-container {
    max-height: 60px;
    height: 60px;
    }
    header.stickymenu .site-navigation {
    display: none;
    }
    header.stickymenu .logo {
    margin-top: 0;
    margin-bottom: 0;
    }
    .top-bar {
        margin-top: 60px;
    }
    }

    Kind regards,
    Andrej