Moving header widgets above site header (mobile view) and moving mobile menu

Home Forums Icelander Moving header widgets above site header (mobile view) and moving mobile menu

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20146

    waterfalltom
    Participant

    Moving header widgets above site header (mobile view) and moving mobile menu

    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 Oliver,

    Thank you so much for your great support and quick responses. I just have a few more questions as requested by my client.

    1). Is it possible to move the site header widget area (which I currently have used to show a “book now” button), to above the site title and logo when in mobile view? It just looks a bit odd appearing below the header and before the content.

    2). I’ve been asked whether it’s possible to keep the hamburger menu in mobile view, but rather than have it stuck to the bottom of the screen, to move it to below the site logo as per traditional themes? Despite explaining that it is more accessible, I’ve had feedback that it’s hard to notice when it’s at the bottom of the screen.

    Again thank you for all of your hard work. I haven’t attached screenshots as I think I’ve explained what I’m on about OK but do let me know if you need them.

    #20149

    Oliver Juhas
    Keymaster

    Hi waterfalltom,

    Thank you, I’m glad to help :)

    1. The header widgets area is displayed below the header on mobiles so the logo and secondary navigation is the first thing you can access on the website, as can be seen on theme demo. I can’t really see a header widgets area on your website though, but if you still need to force it to display above header even on mobile screens, please use this custom CSS:
      .header-widgets-container {
      	-webkit-order: -1;
      	-ms-flex-order: -1;
      	order: -1;
      }
    2. I think you basically need to display the menu as it is on tablet screens. In that case, please try to use this custom CSS:
      @media only screen and (max-width: 41.9375em) and (min-height: 28em) {
      	
      	.menu-toggle {
      		position: static;
      		width: auto;
      		height: auto;
      		left: auto;
      		bottom: auto;
      		padding: .76543em 2em;
      		margin-right: 1.62rem;
      		font-size: .81rem;
      		line-height: 1.62;
      		border: 2px solid;
      		border-color: inherit;
      		box-shadow: none;
      		opacity: 1;
      		-webkit-animation: none;
      		        animation: none;
      	}
      
      	.is-active .menu-toggle {
      		display: inline-block;
      		position: fixed;
      		width: 3rem;
      		right: 0;
      		top: 0;
      		padding: 0;
      		line-height: 3rem;
      		text-align: left;
      		text-indent: -999em;
      		z-index: 999;
      	}
      
      	.is-active .menu-toggle::before {
      		position: absolute;
      		width: 100%;
      		left: 0;
      		top: 0;
      		text-align: center;
      		text-indent: 0;
      	}
      
      	.admin-bar .is-active .menu-toggle {
      		top: 46px;
      	}
      
      }
      
      .shop-mobile-menu-links {
      	display: none;
      }

      Alternatively you can just move the menu to top.

    Please try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

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

You must be logged in to reply to this topic.