Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] header float right

Home Forums Support header float right

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #173503
    Chad Biggs

    Hello, I am using a w3-container in my header.php. I need a <p> and a btn element to float right on the same line but nothing I do seems to work. It works great on a html page. The plan is to have these two elements on a single line floating right with a nav bar underneath and then a logo on the left of the header to balance things out. Will you point me in the right direction please?
    http://cboysweb.com/

    Thank you,
    -Chad

    #173536
    Tom
    Lead Developer
    Lead Developer

    Hi Chad,

    I’m not sure what a w3 container is, but you can use the built in CSS framework in the theme like this:

    <div class="grid-50">
        Left column stuff
    </div>
    <div class="grid-50">
        Right column stuff
    </div>

    You could put that in a header widget and it should get you going.

    Let me know 🙂

    #173606
    Chad Biggs

    Light bulb = “click”! Thank you for the grid info.

    You mentioned before that I should use header widgets, but I can’t control their positioning. I still don’t get it. They just stack on top of each other. I need a left, center and right. Will you explain if you have time? … Do I use the same grid concept?

    Thank you,

    -Chad

    #173623
    Chad Biggs

    Dag! Sorry to keep bothering you on this. It’s almost but no cigar. I have the below divs in Before Header Content gp hooks. The button doesn’t line up on the right and it doesn’t work well in different size browsers. Will you tell me what I’m doing wrong here? < href=”http://cboysweb.com/&#8221; target=”_blank”>http://cboysweb.com/</&gt;
    .red {
    background-color: #F03;
    height: 135px;
    }
    .green {
    background-color: #3F3;
    height: 135px;
    padding-top: 60px;
    font-size: 12px;
    text-align: right;
    }
    .blue {
    background-color: #03F;
    height: 135px;
    }

    <!-- header grid -->
    <div class="red grid-20"><img src="http://cboysweb.com/asset/poolblue-254x130.png" width="254" height="130" alt="Pool Blue Logo></div>
    <div class="blue grid-20"><button type = "button" class = "btn btn-primary"><i class="fa fa-phone fa-lg"></i> (727)-858-7814</button></div>
    <div class="green grid-50"><p>Tampa Bay and Lakeland Area Swimming Pool and Spa Contractor, Builder and Designer Since 1996</p></div>
    <!-- End header grid -->
    • This reply was modified 4 years, 9 months ago by Chad Biggs.
    • This reply was modified 4 years, 9 months ago by Chad Biggs.
    #173642
    Tom
    Lead Developer
    Lead Developer

    You’re missing a closing quotation after: alt=”Pool Blue Logo

    #173706
    Chad Biggs

    Well s***. Call me a dip and color me red. So sorry for the bother Tom and thank you so much for your help!

    -Chad

    #173733
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.