Create New Topic

Creating 3 columns in header area

Home Forums Projects Creating 3 columns in header area

This topic contains 5 replies, has 2 voices, and was last updated by  Bryan Hadaway 2 years, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #3635

    Parth Ranjan
    Participant

    Bryan Sir
    I want to create 3 columns in header area of groundwork, WordPress. First column for contact no, second column for logo and third column for search box. I am attaching scratch, kindly see it and assist me. The code should be a responsive.
    Header
    Regards
    Parth Ranjan, New Delhi

    #3638

    Bryan Hadaway
    Keymaster

    You’ll want to add the following HTML to your header.php or a child theme header.php:

    <div class="header-third header-third-1">
    PHONE # HERE
    </div>
    <div class="header-third header-third-2">
    LOGO CODE HERE
    </div>
    <div class="header-third header-third-3">
    SEARCH CODE HERE
    </div>

    You’ll then want to add the following CSS to your style.css or a child theme style.css:

    .header-third{width:31.3%;margin:1%;float:left}
    .header-third-1{text-align:left}
    .header-third-2{text-align:center}
    .header-third-1{text-align:right}
    #3639

    Parth Ranjan
    Participant

    Thank you Bryan Sir, for your best assistance and cordination..

    Regards
    Parth Ranjan, New Delhi

    #3641

    Bryan Hadaway
    Keymaster

    You’re welcome.

    #3642

    Parth Ranjan
    Participant

    Hello Sir

    My question is about circles with hover, as you described in previous topic “Horizontal menu customization in home page” and your reply was

    nav ul li a {
    background: none repeat scroll 0 0 #eee;
    border-radius: 50%;
    color: #777;
    display: block;
    float: left;
    font-family: “Raleway”,sans-serif;
    font-size: 100%;
    font-weight: 500;
    height: 120px;
    line-height: 120px;
    margin: 1%;
    padding: 0;
    text-align: center;
    width: 120px;
    }

    I had used this code and work perfectly well…

    Now I have a same issue with some customization kindly see the image below
    circle image

    I have tried sir but not working.. Is this possible with the using of css.

    Any suggestion kindly share with me.

    Regards
    Parth Ranjan, New Delhi

    #3643

    Bryan Hadaway
    Keymaster

    Please start a separate topic for this and please share the URL and more details on what the issue is.

    Thank you.

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

You must be logged in to reply to this topic.