Logo size, header area, and mobile menu font

  • Author
    Posts
  • #156852

    Hello! I have three questions.

    1. What are the ideal pixel dimensions for a logo so that it is aligned with the social media icons and search bar in the header area? I want it to appear all on the same line for desktop computers. I have attempted to adjust the buffer in CSS to clean up the look, but this moves the entire line down, which makes the social media and search bar not in line with the logo. Alternatively, is there CSS coding to center the logo and these menus on the same horizontal plane with the center of their horizon instead of the top of the horizon?

    2. In tablet and mobile view, the logo automatically resizes and goes above the social media and search bar. How can I adjust the buffer spacing between these menus in a mobile setting so that they look closer stacked together?

    3. When I switch to mobile view, the font that says “Menu” is not the font I selected in the customization tab. How do I change that font?

    The page in question is http://www.moderatemicrophone.com

    Thank you!

    The blog I need help with is moderatemicrophone.com.

    #156884

    themezee
    Theme Author

    Hi there,

    Thanks so much for using Dynamic News.

    1) A height of 40 to 60 pixel should be fine for the logo image.

    You can also align the logo and social icons with this short CSS snippet, but it will affect mobile devices as well:

    #header {
        display: flex;
        align-items: center;
    }
    #logo {
        margin-right: auto;
    }

    2) You can adjust that with this short CSS code:

    #header-content {
        padding-top: 0;
    }

    3) You can use this CSS snippet to change the font of the mobile menu toggle:

    #mainnav-icon {
        font-family: "calluna-1","calluna-2",serif;
        font-weight: normal;
    }

    You can insert CSS code on Customize > CSS.

    Cheers,
    Thomas

    #156886

    Thank you! The desktop looks exactly as desired. Is there a CSS line that makes it possible to remove the social media and search bar in tablet and mobile views? I have been trying to make a desktop versus mobile experience with the below code but not getting what I want.

    .meta-author, .widget-category-posts .more-posts .postmeta {
    	display: none;
    }
    
    .postinfo .meta-tags {
    	display: none;
    }
    
    #header {
    	padding-top: 1mm;
    	padding-left: 1mm;
    	padding-right: 0;
    	padding-bottom: 0;
    }
    #mainnav-icon {
        font-family: "calluna-1","calluna-2",serif;
        font-weight: normal;
    }
    
    @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;
    }}
    #156920

    themezee
    Theme Author

    You can hide the header content on mobile devices with this CSS snippet:

    @media only screen and (max-width: 60em) {
        #header-content {
            display: none !important;
        }
    }

    Cheers,
    Thomas

    #156940

    Perfect! Thank you!

The topic ‘Logo size, header area, and mobile menu font’ is closed to new replies.