[Resolved] Menu

  • Author
    Posts
  • #12699

    Andrew Misplon
    Keymaster

    I think the logo will be easier to manage if cropped but I’ll leave that up to you.

    The logo is too large for mobile so perhaps wrap the rule like this:

    @media (min-width: 1024px) {
    	.site-header .site-branding img {
    		max-height: 172px;
    	}
    }

    So remove the rule you have now and use this instead. Your logo will then drop to max-height: 91px under 1024px.

    Then in Custom CSS, the media query I inserted there, it’s up to 768px, change that to min-width: 1024px instead.

    #12723

    fredriksegeranpt
    Participant

    Hi!
    I still can’t see my heder picture on iPad 🙁 How do I change it?

    This is my CSS
    /* Logo max height */
    .site-header .site-branding img {
    max-height: 172px;
    }

    @media (min-width: 786px) {
    /* Logo row height */
    .site-header .site-branding-container {
    height: 175px;
    }
    /* Menu row height */
    .site-header .container, .main-navigation .menu-search {
    height: 40px
    }
    @media (min-width: 786px) {
    #main-slider.overlap {
    margin-top: -40px/* Negative value of whatever you’ve set above */
    }
    }
    .main-navigation div>ul>li>a, .main-navigation .menu-search .search-icon:before {
    height: 40px;
    line-height: 40px
    }
    .main-navigation ul ul {
    top: 37px/* Minus three of whatever you’ve set above */
    }
    }

    #12724

    Andrew Misplon
    Keymaster

    Hi, give it a try now.

    For notes:

    /* Top bar */
    .resp #top-bar .top-bar-text {
    	text-align: center;
    	width: 100%;
    }
    	
    @media (min-width: 1024px) {
    	/* Logo max height */
    	.site-header .site-branding img {
    		max-height: 172px;
    	}
    	/* Logo row height */
    	.site-header .site-branding-container {
    		height: 175px;
    	}
    	/* Menu row height */
    	.site-header .container, .main-navigation .menu-search {
    		height: 40px;
    	}
    	#main-slider.overlap {
    		margin-top: -40px; /* Negative value of whatever you've set above */
    	}
    	.main-navigation div>ul>li>a, .main-navigation .menu-search .search-icon:before {
    		height: 40px;
    		line-height: 40px;
    	}
    	.main-navigation ul ul {
    		top: 37px; /* Minus three of whatever you've set above */
    	}
    }
Viewing 3 posts - 16 through 18 (of 18 total)

You must be logged in to reply to this topic.

Scroll to top