Education Theme Header Menu

[macnrwanda08]

Hello,

I'm customizing the Education Theme for a client. I would like the "Title" to spread completely across the top of the page as if there were no header widget.

Then I would like the header menu to span across the entire page just below the "Title" but with the css styles that are buildt into the header widget menu area.

How can I do this?

[cwalsh]

Hi macnrwanda08,

You should be able to achieve this by making a few small CSS adjustments.

Set your title-area width to 100%

#title-area {
float: left;
overflow: hidden;
padding: 27px 0 0;
overflow: hidden;
width: 100%;
}

Set your widget-area width to 100%

#header .widget-area {
float: right;
min-height: 95px;
padding: 25px 0 0 0;
position: relative;
width: 100%;
}

Then set the float of your #header .menu to left

#header .menu {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
background: #f8f8f8;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
bottom: 0;
clear: both;
color: #747474;
float: left;
font-size: 14px;
position: absolute;
right: 0;
text-shadow: #fff 1px 1px;
}

---

Need website customization services or other help? Caley @ PixelPerfect Design Studio | Connect with me on Twitter: @pixelsperfect | Like me on Facebook: https://www.facebook.com/PixelPerfectDesignStudio

[macnrwanda08]

Thanks so much! This worked perfectly!

[macnrwanda08]

Now, I would like to insert a square logo to the left of the text.

I tried using background image and it looks fine except when the window size is small and then the words move on top of the logo and it doesn't look good.

I know just enough css to get myself in trouble!

Any thoughts?

Another thought was to insert a banner image with logo and text, but if I insert a full length banner image what will happen to the responsiveness of the design?

[Author]

Posts