Overhang Logo Needs Responsive help

Community Forums Forums Design Tips and Tricks Overhang Logo Needs Responsive help

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  eamonmoriarty 2 months, 4 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #102275

    eamonmoriarty
    Participant
    Post count: 194

    I managed to create a logo which overhangs the navbar following discussions on this post: http://www.studiopress.com/forums/topic/overhang-logo and it looks OK at full size. But it needs some responsive CSS to make it work properly at browser sizes of 480 or less.
    The problem is that the Right Header Widget Area does not drop below the Left Header Widget Area and just goes behind, creating a mess.
    Development site can be seen at http://kerryladies.ciarraiabu.com
    I’m trying to find what changes to media queries are needed to get this to work properly.
    Any help appreciated.


    Eamon Moriarty
    EM Dzine

    #102282

    Sridhar Katakam
    Participant
    Post count: 923

    Add this CSS:

    @media only screen and (max-width: 671px) {
    
    	.header-left {
    		position: static;
    		float: none !important;
    		margin: 0 auto;
    	}
    
    	.header-right {
    		float: none !important;
    		width: auto !important;
    		text-align: center !important;
    	}
    
    	.header-right .alignright {
    		float: none;
    	}
    	
    	.genesis-nav-menu {
    		padding-left: 0;
    	}
    
    }

    to get

    screenshot


    #102327

    eamonmoriarty
    Participant
    Post count: 194

    Sridhar Katakam, many thanks, that is just what I was looking for.


    Eamon Moriarty
    EM Dzine

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

You must be logged in to reply to this topic.