This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Responsive header simplified logo

  • Creator
    Topic
  • #8125
    ricksouth
    Participant

    Thank you for a great theme. Currently I have a wide header logo with picture for the website http://www.bwfli.com/. But as I narrow the browser window, the logo with picture gets smaller and smaller. I like how the Nav buttons work with a very narrow browser (smaller screens). They jump to being on top of each other. At this point it would be good for my header to be just the round logo without the picture. It would be like your Akita logo in a narrow browser. Is there a way to jump to a second simple logo PNG at a certain point in the narrowing of the browser?

    Also, I used your suggestion to remove the header padding on my wide header logo and picture. This works well at the top. But there is still about 5px of space at the bottom below the header logo picture. I would like the header logo picture to be directly next to the Nav buttons without space. Can I do this?

    Thanks for your support.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #8132
    Jason Bobich
    Keymaster

    What you’re asking is a little complicated but is going to require essentially two parts:

    1) You need to actually hook in your second logo from your Child theme’s functions.php. So, for example, you could hook it to “themeblvd_header_logo” and it’ll get placed after the theme’s current logo.

    http://dev.themeblvd.com/tutorial/actions/

    http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

    2) So, now you’ll essentially have two logo images sitting in your header. You’d then style them to be displayed or not based on the viewport size. Here’s a basic outline of how this works targeting viewport sizes similar to the theme:

    /* Desktops */
    .whatever {
    	...
    }
    .whatever-else {
    	...
    }
    
    /* Tablets */
    @media (max-width: 800px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }
    
    /* Mobile */
    @media (max-width: 480px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }

    But there is still about 5px of space at the bottom below the header logo picture.

    Currently the logo’s image is styled to display inline, but you want to target that <img /> and set it to display as “block” — This will remove the basic line-height spacing the HTML5 doctype adds below inline images.

    http://www.w3schools.com/cssref/pr_class_display.asp

    Note: The “display” property is also what you’d be adjusting in the answer to your first question in displaying/hiding the logo at different viewports.

    #8134
    ricksouth
    Participant

    Thanks so much. I will work on this and let you know how it turns out.
    Rick

Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.