Twenty Thirteen customized header.

  • Resolved websperations

    (@websperations)


    10 years, 11 months ago

    I have modified my header.php to have 3 div in a row that stack when the screen is shrunk. I am trying to keep the header mobile friendly.

    I have added the following code

    <div class="header_container">
<div class="header_content1 header_content"><img src="https://www.ronaldbernheim.com/wp-content/uploads/2013/12/header_ff.jpg" width="202" height="130" alt="Financial Freedom Wealth Management"/>
</div>
<div class="header_content2 header_content"><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>
</div>
<div class="header_content3 header_content"><img src="https://www.ronaldbernheim.com/wp-content/uploads/2013/12/header_npc.jpg" width="134" height="130" alt="National Planning Corporation"/>
</div>
</div>

    In the styles.css I added

    .header_container{
width:100%;
height:130px;
background-color:white;
}
.header_content{
float:left;
height:130px;
}
.header_content1{
width:400px;
text-align:center;
}
.header_content2{
width:397px;
text-align:center;
}
.header_content3{
width:400px;
text-align:center;
}

    When I view the site on a mobile device or I shrink the width of my browser, the navbar is acting funny.

    On mu cell phone, my logo’s are sitting on top of my navbar and the menu items are not in the blue bar.

    I am stuck and could use any input the community may have.

    Thanks,

    Micah

Viewing 3 replies - 1 through 3 (of 3 total)
  • SideKick Dan

    (@shout-out-sidekick)

    Hey micah,

    It took me a little bit to figure out how to fix it. There might be a few things going on at the same time, but here is a fix that seemed to be immediate and consistent; thankfully pretty simple too. Add the following to your css (either in the place it appears or just by it’s lonesome. either way should work.

    .navbar {clear:both;}

    And to get the mobile submenu to show with a background so it can be read, you have to find this media query

    @media (max-width: 1069px)
.navbar {
max-height: 45px;
margin-top: 160px;
}

    And get rid of the max-height completely.

    if you can’t find it, then you can create the same exact media query and override the problem one using the !important declaration as here

    @media (max-width: 1069px) {
    .navbar {max-height:inherit !important;}
    }

    This also worked.

    Hope it helps. Keep me posted ??

    Best Regards,
    Danny

    Thread Starter websperations

    (@websperations)

    Sweet! My brain was mush last night. I woke up this morning thinking I needed to a clear statement.

    I implemented both pieces of code in my css file and the header is now working perfectly.

    Thanks and have a Merry Christmas!

    Micah

    SideKick Dan

    (@shout-out-sidekick)

    Awesome Micah! ??

    Danny ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty Thirteen customized header.’ is closed to new replies.