Jump to content

I am having problems with my site header


ShoeLace1291
 Share

Recommended Posts

I am having problems with my site header and I can't for the life of me figure them out. I want to split the header into two columns. The height of the header should be determined by the contents of the h1 and p tags inside the left column. The right column should be split up into two rows of equal height containing the navigation menu and social links. I would like to vertically align each of those menus in the center of their parent divs. For some reason, the height properties aren't changing the height of those right column rows at all. What am I doing wrong? Is there a better way to do this? Check out my jsFiddle to see the outcome of my current code... https://jsfiddle.net/hsjkc4at/

 

This is an example of what I want...

XO5Kkqc.gif

 

This is my HTML:

<header>
<div id="banner">

<div class="container">

<div id="banner-inner">

<div id="banner-left">

<h1>Site Name</h1>

<p>Some catchy slogan...</p>

</div>

<div id="banner-right">

<div id="banner-top">

<ul>

<li>Find Me On:</li>

<li><a href+ "#" title="Facebook"><i class="fa fa-facebook-square"></i></a></li>

<li><a href+ "#" title="Twitter"><i class="fa fa-twitter-square"></i></a></li>

<li><a href+ "#" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a></li>

<li><a href+ "#" title="Instagram"><i class="fa fa-instagram"></i></a></li>

</ul>

</div>

<div id="banner-bottom">

<nav>

<ul id="menu-menu-1" class="nav navbar-nav">

<li><a title="Home" href+ "#">Home</a></li>

<li><a title="Blog" href+ "#">Blog</a></li>

<li><a title="Resources" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>

<ul role="menu" class=" dropdown-menu">

<li><a title="HTML & CSS" href+ "#">HTML & CSS</a></li>

<li><a title="JavaScript & jQuery" href+ "#">JavaScript & jQuery</a></li>

<li><a title="PHP" href+ "#">PHP</a></li>

<li><a title="MySQL" href+ "#">MySQL</a></li>

</ul>

</li>

<li><a title="Portfolio" href+ "#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>

<ul role="menu" class=" dropdown-menu">

<li><a title="Web Designs" href+ "#">Web Designs</a></li>

<li><a title="Photo Gallery" href+ "#">Photo Gallery</a></li>

<li><a title="Development Projects" href+ "#">Development Projects</a></li>

<li><a title="Graphic Designs" href+ "#">Graphic Designs</a></li>

</ul>

</li>

<li><a title="Services" href+ "#">Services</a></li>

<li><a title="About" href+ "#">About</a></li>

<li><a title="Contact" href+ "#">Contact</a></li>

</ul>

</nav>

</div>

</div>

</div>

</div>

</div>

</header>

This is my CSS:

header {
background: #D7DADB;

margin: 0px;

padding: 0px 15px;

border-bottom: 15px solid #FC4349;

display: table;

position: relative;

width: 100%;

}



header #banner {

padding: 5px;

display: table;

position: relative;

width: 100%;

color: #2C3E50;

margin: 0px;

}



header #banner #banner-inner {

width: 100%;

}



header #banner #banner-left {

padding: 0px 25px 0px 0px;

float: left;

}

header #banner #banner-left h1 {

font-size: 4em;

color: #FC4349;

font-family: PowerChord;

-webkit-text-stroke-width: 1px;

-webkit-text-stroke-color: #fff;

margin: 0px;

padding: 0px;

line-height: 1.3em;

}



header #banner-left p {

font-size: 1.7em;

font-family: Nirmala;

color: #2C3E50;

margin: 0px 0px 10px 0px;

line-height: 1.3em;

}



header #banner #banner-right {

text-align: right;

height: 100%;

float: right;

}



header #banner #banner-right #banner-top {

text-align: right;

height: 50%;

overflow: auto;

}

header #banner #banner-right #banner-top ul {

list-style: none;

width: 100%;

text-align: right;

margin: 0;

padding: 0;

}



header #banner #banner-right #banner-top > ul > li {

display: inline-block;

margin-right: 15px;

}



header #banner #banner-right #banner-top > ul > li a {

font-size: 1.5em;

color: #FC4349;

}

header #banner #banner-right #banner-bottom {

border-top: 1px solid #6DBCDB;

text-align: right;

}

header #banner #banner-right #banner-bottom > nav {

position: relative;

}

.nav.navbar-nav {

position: relative;

}

.nav.navbar-nav > li > a {

color: #2C3E50;

font-family: NirmalaBold;

font-size: 1.3em;

padding: 5px 5px;

}

.nav.navbar-nav > li > a:hover {

background: #FC4349;

color: #fff;

}

.nav.navbar-nav > li > a:focus {

background: #6DBCDB;

color: #fff;

}

.dropdown-menu {

background: #fff;

border: 1px solid #FC4349;

border-bottom: 0px;

padding: 0px;

}

.dropdown-menu > li {

border-bottom: 1px solid #FC4349;

}

.dropdown-menu > li > a {

color: #FC4349;

text-decoration: none;

padding: 15px 25px 15px 10px;

}

.dropdown-menu > li > a:hover{

background: #FC4349;

color: #fff;

}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...