Daily Dish Pro: Align Header Left at Top of Page

Community Forums Forums Design Tips and Tricks Daily Dish Pro: Align Header Left at Top of Page

This topic is: not resolved

This topic contains 16 replies, has 2 voices, and was last updated by  AC 2 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #118930

    akjones
    Member
    Post count: 14

    Another question here about the header on Daily Dish Pro. :-) I have a logo that is 400×80 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

    #119081

    AC
    Blocked
    Post count: 7712

    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.

    #119184

    akjones
    Member
    Post count: 14

    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/

    • This reply was modified 2 months ago by  akjones.
    • This reply was modified 2 months ago by  akjones.
    • This reply was modified 2 months ago by  akjones.
    • This reply was modified 2 months ago by  akjones.
    #119188

    AC
    Blocked
    Post count: 7712

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

    #119190

    akjones
    Member
    Post count: 14

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

    #119193

    AC
    Blocked
    Post count: 7712

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

    #119195

    AC
    Blocked
    Post count: 7712

    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;
    }
    
    #119196

    akjones
    Member
    Post count: 14

    done!

    #119197

    AC
    Blocked
    Post count: 7712

    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.

    #119198

    AC
    Blocked
    Post count: 7712

    Oh, replace that with this:

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

    akjones
    Member
    Post count: 14

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

    #119200

    akjones
    Member
    Post count: 14

    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?

    #119201

    AC
    Blocked
    Post count: 7712

    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.

    #119202

    akjones
    Member
    Post count: 14

    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?

    #119203

    AC
    Blocked
    Post count: 7712

    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.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.