WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] How to make menu bar responsive? (18 posts)

  1. MilesMuffin
    Member
    Posted 9 months ago #

    How do i make my menu bar position responsive? The position of the menu doesn't change together with the header when I crop my window to mobile size, leaving an empty space between header image and menu bar.

    Thank you!

  2. Andrew
    Forum Moderator
    Posted 9 months ago #

    Could you link the page in question?

  3. MilesMuffin
    Member
    Posted 9 months ago #

  4. Andrew
    Forum Moderator
    Posted 9 months ago #

    Are your header images always going to be 230px tall?

  5. MilesMuffin
    Member
    Posted 9 months ago #

    Yes!

  6. Andrew
    Forum Moderator
    Posted 9 months ago #

    I don't think this is going to work.

    The way TwentyThirteen is currently built means the menu will never be responsive in this sense.

  7. nicolemb
    Member
    Posted 9 months ago #

    I am also having this issue, is there any solution to the header image with an absolute height in Twenty Thirteen?

  8. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    @nicolemb - please start your own thread - also see:

    http://wordpress.org/support/topic/massive-headers?replies=16

  9. MilesMuffin
    Member
    Posted 8 months ago #

    I think it should be possible, as this person managed to do it:
    http://www.natuurspreekt.nl/
    His menu bar is "glued" to the header no matter the size of the window...
    If you compare his site to mine, you can see the difference:
    http://www.accademiavivaldi.ch

    I've tried to ask him how he did it, but got no answer!

    Any help?

    Thanks!

  10. Andrew
    Forum Moderator
    Posted 8 months ago #

    Do you want the header image cut-off?

  11. MilesMuffin
    Member
    Posted 8 months ago #

    Hi,
    I'm sorry I don't understand your question very well... Sorry about my English...
    I try to explain the issue once again:
    on a big screen everything's perfect, but on smaller screens (or on a big screen if you make the browser window smaller) there is a space coming up between the header and the menu bar.
    What I would like is that the menu bar was always "snapping" to the header, without that empty space...
    Thank you!

  12. CrouchingBruin
    Member
    Posted 8 months ago #

    His menu bar is "glued" to the header no matter the size of the window...
    If you compare his site to mine, you can see the difference:

    The difference is that on your site, you've added this CSS rule to make the header image "responsive":

    #masthead.site-header {
    background-size: 100%;
    }

    You'll notice that the Natuur Spreekt site looks responsive only because the site uses actual text for the site title and description, the image still remains the same size when you make the browser narrow, it just gets cropped on the left and right. If you were to delete the rule that you added, and delete the rule you used to hide the site title, it would respond correctly just the same way. Of course, the site title then wouldn't look as nice.

    The problem is that the image is part of the header background instead of an element within the header itself. That is, the container can't resize itself based on the background, it's the background which resizes itself based on the header container.

    The solution would be to take the image off of the image background and insert it as an img tag inside the header. That way, you can get the header to resize based on the image. Here are the steps:

    1) Create a child theme (which you've already done).

    2) Copy header.php from the parent folder into your child theme folder if you have not already done so.

    3) Change these lines in header.php, from this:

    <header id="masthead" class="site-header" role="banner">
    	<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    		<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
    		<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    	</a>

    To this:

    <header id="masthead" class="site-header" role="banner">
    	<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    		<img id="header-image" src="http://www.accademiavivaldi.ch/wp-content/uploads/2013/10/header7.jpg" alt="Header image" />
    	</a>

    What I did was to take out the lines with the h1 and h2 tags that display the site title and site description (since you aren't using them anyway) and replaced them with an img tag that points to your header image.

    4) From the admin dashboard, go to Appearance > Header and click the button that reads Remove Header Image. This takes out the background image for the header container (although I believe this would be optional, I don't think it's necessary).

    5) Add the following CSS to the end of your child theme's style.css file:

    #header-image {
    	width: 100%;
    }
    
    .site-header .home-link {
    	max-width: none;
    	min-height: 0px;
    	padding: 0px;
    }

    That's it! You can see an example on my web site.

  13. CrouchingBruin
    Member
    Posted 8 months ago #

    I had to change the sandbox page so I could work on another theme. However, I created another sandbox site for TwentyThirteen, and you can view the results here.

  14. MilesMuffin
    Member
    Posted 8 months ago #

    Thank you soooooooo much!
    I skipped the "remove header image" part, because the "you will not be able to restoreā€¦" note scared me a littleā€¦ ;-)
    But it seems to work anyway!!
    Thank again!

  15. CrouchingBruin
    Member
    Posted 8 months ago #

    You're welcome, glad my instructions were clear enough for you to understand and follow. Yes, removing the header image was optional, because the img tag being inserted is on top and hiding it, anyway.

  16. patrixon78
    Member
    Posted 7 months ago #

    @CrouchingBruin it works but removing those lines of code:

    <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    from the wbsite isn't good for SEO.

  17. Andrew
    Forum Moderator
    Posted 7 months ago #

    You can just hide the headings with CSS if you prefer, but that still may be detrimental to SEO as some search engines can penalize you for hiding stuff off the page like this.
    If you're going down this CSS hiding route talk to Google about this: http://groups.google.com/

  18. joaomos
    Member
    Posted 6 months ago #

    Great CrouchingBruin
    I was looking exactly for this for some time ago.
    And you explain it in a manner everyone can understand it.
    Thanks a lot. Very good contribution.
    I would like to leave you another question.
    My image is a transparent logo with the intention of taking advantage of the background I created for the body. But it shows white in the background. How can I go around this?

Reply

You must log in to post.

About this Theme

About this Topic