Display primary navigation on mobile

Home Forums Icelander Display primary navigation on mobile

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #20793

    Orla
    Participant

    Display primary navigation on mobile

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi,
    I was wondering how I get the primary burger menu to display on a mobile device. On a small screen it disappears.
    I’m also using the secondary menu… this doesn’t disappear.
    Thanks :)

    #20796

    Oliver Juhas
    Keymaster

    Hi Orla,

    The mobile menu is displayed perfectly fine on your website, at the bottom of the screen. This is a default mobile menu position for Icelander theme (and other of my themes and can be seen in theme demo website too) for easier mobile menu access:

    If you would like to reposition it, please use a solution from my Reykjavik theme.

    BTW, congrats on such a beautiful website! :)

    Best regards,

    Oliver Juhas
    WebMan Design

    #20798

    Orla
    Participant

    Hi Oliver,
    Thanks for your help and the link to the other menu fix on Reykjavik!

    Is it possible to have the tablet style menu appear on the mobile (smaller screen)?

    Thanks again,
    Orla.

    #20800

    Oliver Juhas
    Keymaster

    Hi Orla,

    In that case, please try this custom CSS instead:

    @media only screen and (max-width: 41.9375em) and (min-height: 28em) {
    
    	.site .menu-toggle {
    		position: static;
    		width: auto;
    		height: auto;
    		left: auto;
    		bottom: auto;
    		padding: .76543em 2em;
    		line-height: 1.62;
    		font-size: .81rem;
    		border: 2px solid;
    		border-color: inherit;
    		box-shadow: none;
    		z-index: 999;
    		-webkit-transform: none;
    		    -ms-transform: none;
    		        transform: none;
    		-webkit-animation: none;
    		        animation: none;
    	}
    
    	.is-active .menu-toggle {
    		display: inline-block;
    		position: fixed;
    		width: 3rem;
    		right: .62em;
    		top: .62em;
    		padding: 0;
    		line-height: 3rem;
    		text-align: left;
    		text-indent: -999em;
    		border-width: 0;
    		z-index: 999;
    	}
    
    	.is-active .menu-toggle::before {
    		position: absolute;
    		width: 100%;
    		left: 0;
    		top: 0;
    		text-align: center;
    		text-indent: 0;
    	}
    
    }
    
    .shop-mobile-menu-links {
    	display: none;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #20836

    Orla
    Participant

    Thank you once again :)

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

You must be logged in to reply to this topic.