Add a Widget area to the header?

I’m trying to create a new widget area in a header.php file. Will just put a text widget in there.

Trying to stumble through this, I was able to create the widget and get the text in there, but I’m not sure how to do the CSS.

http://spidercreations.net/wp-content/uploads/2014/01/iwd-header-change.jpg

Over on the right, under the navigation menu, I want to have a widget there to add the address, phone and email for the business.

Suggestions?

I’m thinking I need to style it so it is right justified and specify font.

Without any CSS, it’s showing up under the logo, left justified, and the text in there is displayed with a bullet at the start.

  • Alexander
    • DEV MAN’s Mascot

    Hi @steve McGough,

    If you’re only using text, then right justify should be just fine. Otherwise you might have other elements show up incorrectly.

    Does your site have a fixed width layout? If so, you could float it to the right and provide the containing element with a width. This would give you more flexibility on the left.

    I’m not sure why there’s a bullet showing up if you’re using a text widget. Could be that the widget area has list items that are inheriting default styles.

    You could fix this by removing the style from the ul like this:

    ul {list-style-type:none}

    Hope this helps! Let me know how it goes!

  • Steve McGough
    • Site Builder, Child of Zeus

    OK. I have provided the access information above.

    I’ve created a widget area and was able to remove the bullet with the code suggested.

    Since I’ve increased the size of the logo, I’m having some issues with responsiveness. Is there a way to …

    1 – Replace the logo with a different logo once it gets down to iPhone size?

    2 – At that small size, put the mobile menu either under or over that different image? (Right now, it’s on top of the image when viewed on a phone.)

    3 – Have that widget area with the address in a box under the logo image and menu, but above the slider.

    I think that would be ideal for small mobile devices.

    Right now, I’ve learned how to turn off that widget area completely if the screen is smaller than 850px using this in the style.css

    @media only screen and (max-width: 850px) {
    .contact-widget {display: none;}
    }

  • Alexander
    • DEV MAN’s Mascot

    Hey @steve McGough,

    Give this media query CSS a try. (remove the display:none version first)

    @media only screen and (max-width: 850px) {

    #header {
    height: auto;
    }

    #logo {
    width:180px;
    margin:15px auto;
    display:block;
    }

    #primary-nav {
    clear:both;
    }

    div.contact-widget {
    margin-top: 20px;
    float: none;
    width:100%;
    text-align:center;
    }
    }

    I’m sorry about not getting back to you sooner here. That should give you something to start with.

    Best regards,

  • Steve McGough
    • Site Builder, Child of Zeus

    Alexander,

    Thank you for the CSS. I implemented it and it did help.

    The only goofy thing is that we loose the address area that is currently under the menu when the screen is smaller.

    If you have any suggestions to get that placed under the logo, it would be nice … but not a super-high priority.

    Steve

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.