Community Forums › Forums › Archived Forums › Design Tips and Tricks › Daily Dish Pro: Align Header Left at Top of Page
Tagged: daily dish pro, header
- This topic has 16 replies, 2 voices, and was last updated 9 years, 8 months ago by Anita.
-
AuthorPosts
-
August 15, 2014 at 2:41 am #118930akjonesMember
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!
AmandaAugust 15, 2014 at 2:23 pm #119081AnitaKeymasterWell, 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.
Love coffee, chocolate and my Bella!
August 16, 2014 at 6:47 am #119184akjonesMemberThanks @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. 🙁
August 16, 2014 at 7:10 am #119188AnitaKeymasterDo you have a "no right click" plugin or code activated on there? If so, please deactivate.
Love coffee, chocolate and my Bella!
August 16, 2014 at 7:13 am #119190August 16, 2014 at 7:15 am #119193AnitaKeymasterOk, going back over there now. Be right back.
Love coffee, chocolate and my Bella!
August 16, 2014 at 7:22 am #119195AnitaKeymasterDo 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; }
Love coffee, chocolate and my Bella!
August 16, 2014 at 7:25 am #119196akjonesMemberdone!
August 16, 2014 at 7:30 am #119197AnitaKeymasterOk, 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.
Love coffee, chocolate and my Bella!
August 16, 2014 at 7:31 am #119198AnitaKeymasterOh, replace that with this:
.title-area { float: left; width: 400px; }
Love coffee, chocolate and my Bella!
August 16, 2014 at 7:34 am #119199akjonesMemberNo worries...I appreciate the help! OK, header looks good now, making progress! Right menu still seems lost in space...
August 16, 2014 at 7:36 am #119200akjonesMemberOh, 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?
August 16, 2014 at 7:39 am #119201AnitaKeymasterYou 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.
Love coffee, chocolate and my Bella!
August 16, 2014 at 7:42 am #119202akjonesMemberOK, 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?
August 16, 2014 at 7:47 am #119203AnitaKeymasterWhen 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.
Love coffee, chocolate and my Bella!
August 16, 2014 at 7:51 am #119204akjonesMemberOh 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.
August 16, 2014 at 7:58 am #119205AnitaKeymasterYou will need to take the code you added and tweaked and place that in the Media Queries section and play around with that too.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.