#127607 Header on mobile

Landing Forums Jupiter WordPress Theme Header on mobile

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • Robert Helle

    Hi.

    I turned off the option “show main navigation”. However I would like to show main navigation only on mobile phones, with a transparent background. Can you help me do that? On other devices the main navigation should be hidden. Thank you.

     

    Robert Helle

    Url is xefoslo.no. I use Jupiter, not Jupiter x.

    Nodari Support Team

    Good morning Robert,

    Well, yes, we can try that, to do this you need to enable the header again and use this code:

    .mk-header {
        display: none;
    }
    
    @media only screen and (max-width: 768px) {
    .mk-header {
        display: block !important;
    }
    }

    This code will hide the header from Desktop devices and will show it for Mobile devices,
    Now I’m interested in how exactly you want to style it?

    Thanks and have a good weekend Robert

    Robert Helle

    Hi.

    I have styled in the theme settings to be a white burger icon. However I would like the dropdown menu to be transparent 95% white with black menu text. Now the menu shows on mobile but only partly. See screenshot.

     

    Tatyana Hutsol Support Team

    Hello,

     

    Do you want the background image to be shown behind the dropdown mobile menu http://snpy.in/gvGUtx ?

    Also I added the Header Height value in Theme Options > Header so the burger menu is shown fully http://snpy.in/rNsFQh .

     

    Regards.

    Robert Helle

    Thx. Yes I would like to show the image/slider as background. And 100% transparent backgroynd behind the burger icon.

    Robert Helle

    Is it possible to activate the Google font Noto sans for the buttons shortcode? It seems that even I added the buttons shortcode under theme options – typography – fonts, its not working. The font on the buttons here is different from the rest of the text on the site where I also use Noto  sans.

    https://xefoslo.no/menu/

    Robert Helle

    PS: I have set the header and sticky header to 0px height now because it is important that the header is hidden on all devices. Only burger icon should show on mobiles, nowhere else.

    I also trying to remove the bottom header border.

    Tatyana Hutsol Support Team

    Hello,

     

    I added this code in Theme Options > Advanced > Custom CSS:

    .mk-header {
    background-color: transparent !important;
    border-bottom: none;
    position: absolute;
    }

    Please check the mobile header now.

    As for the buttons, I see that correct font is applied http://snpy.in/PKsPim .

     

    Regards.

    Robert Helle

    That is great. Thank you.

    1. Is it possible to also remove the gap between the top of the site and the menu when the menu is open? (see screenshot)
    2. I would also like to show the logo on top of the menu when the burger menu is opened. Is that possible?

    Thanks a lot.

    Tatyana Hutsol Support Team

    Hello,

     

    1. I don’t recommend to remove that gap as we’ll have to remove the X icon as well that closes the menu http://snpy.in/ZyI8rU . But if you agree, I’ll provide the css code. Let me know.

    2. Unfortunately there is no such option. Logo can be shown near the burger menu, but not inside. Do you agree with it?

     

    Regards.

    Robert Helle
    1. Ok I understand the problem. So its not possible to move the X to for example below the menu when its open?
    2. Ok I see that. And I can not add an image inside the menu either?
    Tatyana Hutsol Support Team

    Hello,

     

    1. I added this css code and moved the X icon under the menu:

    .mk-opened-nav .mk-header-inner.add-header-height {
    height: 0 !important;
    line-height: 0 !important;
    }
    
    .mk-opened-nav .mk-nav-responsive-link {
    margin-top: 55%;
    }

    Please check.

     

    2. I’m sorry, but there is no such option.

     

    Regards.

    Robert Helle

    Thank you Tatyana. Looks excellent now. The owner of this restaurant asks if I can put the burger icon inside a circle. Is it possible to do that? Or change the icon with a burger icon inside a circle?

    Tatyana Hutsol Support Team

    Hello,

     

    Do you mean like this https://prnt.sc/1ibpfl0 ?

    If so, please add this css code:

    .mk-nav-responsive-link {
    border: 1px solid white;
    border-radius: 50px;
    }

    Regards.

    Robert Helle

    Yes, great! Only with color #b8733

    Also it seems the icon are a little to the top of the circle? Should be centered on height and width if possible.

    Tatyana Hutsol Support Team

    Hello,

     

    Please try this css code:

    .mk-nav-responsive-link {
    border: 1px solid #b87333;
    border-radius: 50px;
    padding-top: 12px;
    }

     

    Regards.

Viewing 17 posts - 1 through 17 (of 17 total)
You must be logged in to reply to this topic.
Login