Modern Portfolio: 2 custom header widget areas and CSS

Community Forums Forums Design Tips and Tricks Modern Portfolio: 2 custom header widget areas and CSS

This topic is: resolved

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #40425

    diegocerezo
    Participant
    Post count: 32

    Hello People from StudioPress, first I would like to thank you in advance for all the help! I really appreciate it!

    I have added 2 custom header widget areas a right one and a left one, the reason for this is that I need social icons on the left and a search bar on the right and I need them to show at the same level (currently they are showing at different heights).

    here is the gist

    With CSS I´ve made them half the size of the site wich is 520px, I also used float to make the right header show on the right:

    [css]

    .header_left {
    width: 515px;
    }

    .header-right-extra {
    width: 515px;
    float: right;
    }

    [/css]

    I also need the logo to show under the two widgets and in the middle

    Again thanks a lot!

     

    http://equilibre.gt
    #40459

    psahalot
    Participant
    Post count: 20

    Here is the CSS that you need to use :

    `header-right-extra {
    width: 515px;
    float: right;
    margin-top: 10px;
    }

    .header_left {
    width: 515px;
    float: left;
    margin-top: 10px;
    }
    `

    #40500

    diegocerezo
    Participant
    Post count: 32

    Thanks a lot, i have very little experience but seeing your css code with the margin mods led me to the solution.

    Your code works like a charm, the only thing is that the do not end next to each other, don´t know why, beats me.

    But taking your code I started playing around with some other atributes and the end up working pretty nice, exactly what i need

    here is the CSS code

    [CSS]

    .header_left {
    width: 515px;
     margin-top: 20px;
    }
    
    .header-right-extra {
     position: fixed;
     top: -40px;
     right: 200px;
     width: 300px;
     float: right;
    }
    
    [/CSS]
    
     
    
    
    • This reply was modified 1 year, 4 months ago by  diegocerezo.
    • This reply was modified 1 year, 4 months ago by  diegocerezo.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.