Header widget wrapping

Community Forums Forums Design Tips and Tricks Header widget wrapping

This topic is: not resolved

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  mborger 1 year, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3231

    mborger
    Participant
    Post count: 107

    Hello. I have a text widget in my header in bigrockinvestments.com that calls 6 social media icons across. If copy and paste the same text into a widget for honoluludreamcondo.com, the icons wrap into a 2nd line, pushing down all the content below it. What makes the content of the text widget header wrap on the one website but not on the other?

    #3280

    anitac
    Participant
    Post count: 7062

    I used Firebug and from what I see – Honolulu has a widget width of 250px – whereas, the Hawaii one doesn’t. Did you remove the 250px from the Hawaii website?

    Look for this and remove the width -

    #header .widget-area {

        float: right;
        padding: 25px 0 0;
        text-align: center;
        width: 250px;

    }

     


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #3532

    mborger
    Participant
    Post count: 107

    Thanks – I deleted the line and was able to get a 5th icon in the row. However when I add a 6th icon to the row, something strange happens — the entire header gets move down about 5 lines or so, pushing down the rest of the site. Even if I duplicate an existing icon as the 6th, ex. another YouTube icon, it still happens. I can’t explain it. FYI, I’m a Firebug novice :/

    #3563

    anitac
    Participant
    Post count: 7062

    You header title area is 700px wide – you could change that to 650px and then add the width: 250px; to the #header .widget-area and it will fit. Some how your width of 250px is missing from the widget area.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #3685

    mborger
    Participant
    Post count: 107

    Got it – works like a charm. All I had to do was remove the 700px line — the 250px line stays removed per your original suggestion. Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.