Daily Dish Pro: Align Header Left at Top of Page

[akjones]

Another question here about the header on Daily Dish Pro. 🙂 I have a logo that is 400x80 but instead of having it float in space in the center of the page I'd like to align it to the left on the very top of the page and then have the menu displayed to the right of the logo...sort of like what you see on this website: http://byregina.com

Is this possible without too much fuss?

Thanks!
Amanda

[AnitaC]

Well, it looks like they have disabled the Header Right Widget area in the functions.php:

//* Unregister the header right widget area
unregister_sidebar( 'header-right' );

If you remove that code, it will reactivate Header Right in the Widget area and then you can add a custom menu up there. It should push the logo/text over to the left.

Then give the header right some styling:

.site-header .widget-area {
    float: right;
    width: 820px;
}

You will have to play around with it since I don't have a working demo of this yet.

---

Need help with customization or troubleshooting? Reach out to me.

[akjones]

Thanks @anitac!

I was able to add a Header Right widget exactly like you described but I still can't seem to figure out how to get the logo/header to float over to the left.

I tried changing

 .site-header {
	padding: 80px 0;
	text-align: center;
}

to

.site-header {
	padding: 80px 0;
	text-align: left;
}

but that didn't work. 🙁

http://www.amandakjones.com/

[AnitaC]

Do you have a "no right click" plugin or code activated on there? If so, please deactivate.

---

Need help with customization or troubleshooting? Reach out to me.

[akjones]

Yes I did @anitac! Should be taken care of now...

[AnitaC]

Ok, going back over there now. Be right back.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

Do this first for me. Change this 820px to 420px and save it so I can get the right code for the left to respond.

.site-header .widget-area {
    float: right;
    width: 820px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[akjones]

done!

[AnitaC]

Ok, right below that code you just changed, add this:

.title-area {
    width: 400px;
}

Sorry, it's a bit challenging for me adding everything back in there.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

Oh, replace that with this:

.title-area {
    float: left;
    width: 400px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[akjones]

No worries...I appreciate the help! OK, header looks good now, making progress! Right menu still seems lost in space...

[akjones]

Oh, and not to throw a monkey wrench into our plans but I was also hoping to put a search bar to the right of the menu...should I try adding to that to the widget now?

[AnitaC]

You didn't get my last message - add float: left to the code. Scroll up above your message. If you do that, then you need to increase the width of from 420px to something higher and then target the search and float it. I've actually been playing around with this theme here. Haven't done what you are asking for with it yet though.

---

Need help with customization or troubleshooting? Reach out to me.

[akjones]

OK, yes just changed it...thank you! I will tinker around with it a little bit more but you definitely have me going in the right direction now. What exactly do you mean when you say "target" the search box?

[AnitaC]

When you add the search box, if you look at the code with a developer tool such as Firebug for Firefox, or the Chrome developer tool - you will see that the box has an ID - Search-1 or Search-2, something like that. You will add that to your style sheet and code it in.

---

Need help with customization or troubleshooting? Reach out to me.

[akjones]

Oh OK, got it! 🙂 I also noticed by moving things around it lost some of its mobile-responsiveness so I'll need to consider that too.

[AnitaC]

You will need to take the code you added and tweaked and place that in the Media Queries section and play around with that too.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts