[Resolved] Some CSS questions with the Off Canvas Mobile Menu

Home Forums Support Some CSS questions with the Off Canvas Mobile Menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1403150
    Matthias

    Hey there!

    Do you have an idea how to solve following issues?

    1) Imho the line-height of each menu point on the “second level” of the Off Canvas Mobile Menu is bit to large. What CSS code is needed to change it according to my taste?

    2) The six social media icons are bit too wide to fill just one line. How to set the CSS code space between the social media icons?

    3) How to turn off website content scrolling on my phone while being in the Off Canvas Mobile Menu via CSS? (In Off Canvas Mobile Menu scrolling should only be allowed the menu itself)

    Thank you a lot for your help! Loving your super fast theme…

    Screenshot iPhone XS Max
    Screenshot iPhone XS Max Issues

    edit: my current Custom CSS Code:

    /* Add pseudo fixed background */
    
    body {
        position: relative;
    
    }
    
    body:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://prypjatsyndrome.de/wp-content/uploads/2020/02/website-background-noretina-tinyfied.jpg');
        z-index: -1;
        background-repeat: no-repeat;
        background-position: top center;
    
    }
    
    /* swap pseudo fixed background image on 2x devices */
    
    @media only screen and (min--moz-device-pixel-ratio: 2),
    
    only screen and (-o-min-device-pixel-ratio: 2/1),
    
    only screen and (-webkit-min-device-pixel-ratio: 2),
    
    only screen and (min-device-pixel-ratio: 2) {
    
        body:before {
            background-image: url('https://prypjatsyndrome.de/wp-content/uploads/2020/02/website-background-retina-tinyfied.jpg');
            background-size: cover;
        }
    
    }
    
    /* Other CSS */
    
    button.menu-toggle {
        font-size: 20px;
        /* 20px */
    }
    
    .envira-gallery-image {border-radius: 5px !important;}
    
    .slideout-navigation.main-navigation {
        display: flex;
        align-items: center;
    }
    
    #generate-slideout-menu .inside-navigation {
        padding-top: 0;
    }
    
    .main-navigation .main-nav ul li.menu-item-has-children>a {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;   
    }
    
    .main-navigation ul ul {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li:hover > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li:focus > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li.sfHover > a {
    		border-radius: 5px;
    }
    
    .envirabox-title {
    		text-align: center;
    }
    
    .album-art img {
    		border-radius: 5px;
    }
    
    #sonaar-player {
        left: 50% !important;
        transform: translate3d(-50%, 94px, 0) !important;
    }
    
    #sonaar-player.enable {
    		max-width: 1100px !important;
    		left: 50% !important;
    		transform: translate3d(-50%, 0, 0) !important;
    	
    }
    
    #sonaar-player .playerNowPlaying .album-art img.hover {
        display: none;
    }
    
    span.track-number {
    		display:none;
    }
    
    #sonaar-player .list {
        display: none!important;
    }
    
    @media only screen and (min-width: 768px) {
    .main-navigation {
        z-index: 100;
        padding: 0;
        clear: both;
        display: block;
    }
    }
    
    .added_to_cart .wc-forward {
    		display: none;
    }
    
    a.added_to_cart.wc-forward {
    		display: none;
    }
    
    @media only screen and (max-width: 768px) {
    	a.cart-contents.shopping-cart {
    		color: #FFFFFF !important;
    			   background: #339900 !important;
    	   border-radius: 5px !important;
    }
    	
    	li.wc-menu-item.menu-item-align-right.has-items {
    	   
    }
    	
    	.main-navigation {
    		background: rgba(255,255,255,0.95);
    		padding: 0px;
    }
    	
    		.main-navigation.navigation-stick {
    		background: rgba(255,255,255,0.95);
    		padding: 0px;		
    }
    	
    }
    
    #mobile-header {
    		background: rgba(255,255,255,0.95);
    }
    
    @media only screen and (min-width: 769px) {
    		a.cart-contents.shopping-cart {
    		color: #FFFFFF !important;
    			   background: #339900 !important;
    			border-radius: 5px !important; }
    	
    	li.wc-menu-item.menu-item-align-right.has-items {
      	background: #339900;
      	border-radius: 5px;
    }
    		
    	.main-navigation.navigation-stick {
    		background: rgba(255,255,255,0.95);
    			
    }
    	
    }
    
    .main-navigation img, .main-navigation.navigation-stick img {
    		height: 30px !important;
    		padding-left: 0px !important;
    		padding-right: 0px !important;
    		padding-top: 0px !important;
    		padding-bottom: 0px !important;
    		margin-top: 10px !important;
    		margin-bottom: 10px !important;
    }
    
    .add_to_cart_button {
        background-color: #339900 !important;
    		color: #FFFFFF !important;
    		padding: 6px 8px 7px 10px;
    	-webkit-box-shadow: 0px 0px 5px 0px #339900 !important;
    -moz-box-shadow: 0px 0px 5px 0px #339900 !important;
    box-shadow: 0px 0px 5px 0px #339900 !important;
    }
    
    .add_to_cart_button:hover {
        background-color: #336600 !important;
    }
    #1403730
    David
    Staff
    Customer Support

    Hi there,

    1. Add this CSS to adjust the padding on the sub menu items:

    .main-navigation.slideout-navigation .main-nav ul ul li a {
        padding: 5px 15px 5px 15px;
    }

    2. For the social icons you would need to give each menu item a CSS class of social-icon

    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    then add this CSS:

    .main-navigation .main-nav ul li.social-icons a {
        padding-left: 5px;
        padding-right: 5px;
    }

    Please note that this will reduce the Tap Target area of the icons, making it harder for users to click and potentially risk a “Clickable Elements too Close Together” alert from Search Engines.

    3. Tricky – you can try adding this CSS:

    .slide-opened body {
        overflow: hidden;
    }

    But test it thoroughly as it may effect the behanviour of the Slide Out scrolling.

    #1404357
    Matthias

    Hey David,

    thank you so much for your help!

    That all works fine so far!

    The new CSS code:

    /* Add pseudo fixed background */
    
    body {
        position: relative;
    
    }
    
    body:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('https://prypjatsyndrome.de/wp-content/uploads/2020/02/website-background-noretina-tinyfied.jpg');
        z-index: -1;
        background-repeat: no-repeat;
        background-position: top center;
    
    }
    
    /* swap pseudo fixed background image on 2x devices */
    
    @media only screen and (min--moz-device-pixel-ratio: 2),
    
    only screen and (-o-min-device-pixel-ratio: 2/1),
    
    only screen and (-webkit-min-device-pixel-ratio: 2),
    
    only screen and (min-device-pixel-ratio: 2) {
    
        body:before {
            background-image: url('https://prypjatsyndrome.de/wp-content/uploads/2020/02/website-background-retina-tinyfied.jpg');
            background-size: cover;
        }
    
    }
    
    /* Other CSS */
    
    button.menu-toggle {
        font-size: 20px;
        /* 20px */
    }
    
    .envira-gallery-image {border-radius: 5px !important;}
    
    .slideout-navigation.main-navigation {
        display: flex;
        align-items: top;
    }
    
    #generate-slideout-menu .inside-navigation {
        padding-top: 0px;
    }
    
    .main-navigation .main-nav ul li.menu-item-has-children>a {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;   
    }
    
    .main-navigation ul ul {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
    }
    
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li:hover > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li:focus > a {
    		border-radius: 5px;
    }
    
    .main-navigation .main-nav ul li.sfHover > a {
    		border-radius: 5px;
    }
    
    .main-navigation.slideout-navigation .main-nav ul ul li a {
        padding: 5px 5px 5px 5px;
    }
    
    /* Space between social media icons in Off Canvas Mobile Menu */
    .main-navigation .main-nav ul li.menu-item-float-right a {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
    
    /* Avoid scrolling website content while being in Off Canvas Mobile Menu */
    .slide-opened body {
        overflow: hidden;
    }
    
    .envirabox-title {
    		text-align: center;
    }
    
    .album-art img {
    		border-radius: 5px;
    }
    
    #sonaar-player {
        left: 50% !important;
        transform: translate3d(-50%, 94px, 0) !important;
    }
    
    #sonaar-player.enable {
    		max-width: 1100px !important;
    		left: 50% !important;
    		transform: translate3d(-50%, 0, 0) !important;
    	
    }
    
    #sonaar-player .playerNowPlaying .album-art img.hover {
        display: none;
    }
    
    span.track-number {
    		display:none;
    }
    
    #sonaar-player .list {
        display: none!important;
    }
    
    @media only screen and (min-width: 768px) {
    .main-navigation {
        z-index: 100;
        padding: 0;
        clear: both;
        display: block;
    }
    }
    
    .added_to_cart .wc-forward {
    		display: none;
    }
    
    a.added_to_cart.wc-forward {
    		display: none;
    }
    
    @media only screen and (max-width: 768px) {
    	a.cart-contents.shopping-cart {
    		color: #FFFFFF !important;
    			   background: #339900 !important;
    	   border-radius: 5px !important;
    }
    	
    	li.wc-menu-item.menu-item-align-right.has-items {
    	   
    }
    	
    	.main-navigation {
    		background: rgba(255,255,255,0.95);
    		padding: 0px;
    }
    	
    		.main-navigation.navigation-stick {
    		background: rgba(255,255,255,0.95);
    		padding: 0px;		
    }
    	
    }
    
    #mobile-header {
    		background: rgba(255,255,255,0.95);
    }
    
    @media only screen and (min-width: 769px) {
    		a.cart-contents.shopping-cart {
    		color: #FFFFFF !important;
    			   background: #339900 !important;
    			border-radius: 5px !important; }
    	
    	li.wc-menu-item.menu-item-align-right.has-items {
      	background: #339900;
      	border-radius: 5px;
    }
    		
    	.main-navigation.navigation-stick {
    		background: rgba(255,255,255,0.95);
    			
    }
    	
    }
    
    .main-navigation img, .main-navigation.navigation-stick img {
    		height: 30px !important;
    		padding-left: 0px !important;
    		padding-right: 0px !important;
    		padding-top: 0px !important;
    		padding-bottom: 0px !important;
    		margin-top: 10px !important;
    		margin-bottom: 10px !important;
    }
    
    .add_to_cart_button {
        background-color: #339900 !important;
    		color: #FFFFFF !important;
    		padding: 6px 8px 7px 10px;
    	-webkit-box-shadow: 0px 0px 5px 0px #339900 !important;
    -moz-box-shadow: 0px 0px 5px 0px #339900 !important;
    box-shadow: 0px 0px 5px 0px #339900 !important;
    }
    
    .add_to_cart_button:hover {
        background-color: #336600 !important;
    }
    #1404508
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.