Moving content to top of header on right

Community Forums Forums Design Tips and Tricks Moving content to top of header on right

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Tom 2 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #108033

    kathiemt
    Participant
    Post count: 112

    I’m using Streamline Pro and I’m having problems with getting text on the right hand side to actually be a the top, instead of down on the next line in my header.

    I have my logo on the left, the social media icons next to that and then to the right should be my contact information. But it’s gone down to the next line/level and I have no idea how to get it to move up in line with the logo and social media icons.

    Any ideas please?


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    http://vadirectory.net/
    #108478

    Tom
    Participant
    Post count: 808

    Hi Kathie,

    This CSS code should help out with your header items. Place it in the bottom of your child theme’s stylesheet. You might want to first review the text in the header widget as much of it is repeated in your logo image. (Change the logo/change the text? – my preference would be to change the logo.) If you change either, these style changes may need to be tweaked a bit.

    .site-header .header-widget-area {
        float: right;
        text-align: right;
        width: 700px;
    }
    
    .site-header .simple-social-icons {
        text-align: left;
        float: left;
        margin: 35px 0 35px 50px;
        width: 300px;
    }
    
    .site-header .widget_text {
        clear: right;
        float: right;
    }
    
    @media only screen and (max-width: 1023px){
    
        .site-header .header-widget-area {
            width: 100%;
            padding: 0 30px;
        }
        
        .site-header .simple-social-icons {
            margin: 60px 0 0 0;
        }
        
    }
    
    @media only screen and (max-width: 767px) {
    
        .site-header .widget_text,
        .site-header .simple-social-icons {
            width: 100%;
            margin: 0px auto;
            text-align: center;
        }
    
        .site-header .simple-social-icons {
            padding-top: 30px;
        }
        
    }

    Choose your next site design from over 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

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

You must be logged in to reply to this topic.