Menu Banner

  • Author
    Posts
  • #156889

    Hello,

    I have two requests for the banner menu.

    1. I would like to reduce the height of the menu banner itself.
    2. I would like to remove the “MENU” text from the hamburger menu and just have the hamburger icon centered.

    Thank you!

    The blog I need help with is moderatemicrophone.com.

    #156918

    themezee
    Theme Author

    Hi again,

    1) You can decrease the spacing of menu items with this CSS code:

    #mainnav-menu a {
        padding-top: 1em
        padding-bottom: 1em;
    }

    2) You should be able to use this CSS snippet for that:

    #mainnav-icon {
        width: 100%;
        text-align: center;
        visibility: hidden;
    }
    
    #mainnav-icon::after {
        float: none;
        margin: 0;
        visibility: visible;
    }

    Cheers,
    Thomas

    #156939

    Thomas,

    The second code worked, although the icon doesn’t appear centered. The first set of CSS modification has not made any change. I’ve played with the numbers in the CSS. The entire CSS I have for the site is below. Do I have something out of order?

    #header {
    	padding-top: 1mm;
    	padding-left: 1mm;
    	padding-right: 0;
    	padding-bottom: 0;
    }
    
    .meta-author, .widget-category-posts .more-posts .postmeta {
    	display: none;
    }
    
    #mainnav-icon {
        width: 90%;
        text-align: center;
        visibility: hidden;
    }
    
    #mainnav-icon::after {
        float: none;
        margin: ;
        visibility: visible;
    }
    
    .postinfo .meta-tags {
    	display: none;
    }
    
    #mainnav-menu a {
        padding-top: 0em
        padding-bottom: 0em;
    }
    
    @media only screen and (min-width:750px) {
    	#header-content {
    		padding-top: 0;
    	}
    	
    	#header {
    		display: flex;
    		align-items: center;
    	}
    	
    	#logo {
    		margin-right: auto;
    	}
    }
    
    @media only screen and (max-width:749px) {
    	#header-content {
    		padding-top: 0;
    		padding-bottom: 0;
    	}
    	
    	#search-toggle {
    		display: none;
    	}

    Also, thank you for being patient with me and helping to get this right. I think I’m close and I should be done asking so many questions.

    #156961

    themezee
    Theme Author

    Sorry, that was my bad. I missed a semicolon in the first CSS statement, after padding-top: 1em;

    #mainnav-menu a {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    Basically the missing semicolon broke all following statements, so you have to add it in your CSS code.

    Also, at the bottom you should add an ending } bracket (last line). Syntax in CSS is very important and even small errors can break everything.

    Cheers,
    Thomas

    #157068

    Sorry for the delay in response. That fixed it. Thank you!

    #157069

    Replying again to mark as closed.

The topic ‘Menu Banner’ is closed to new replies.