Jump to content


Photo
- - - - -

How to set logo right and social icons left?

css logo float brand icons header

Best Answer catpage , 06 June 2013 - 09:29 PM

Thanks James - Working now!

 

I did have to change one class referenced in your code to move the site logo right-

instead of:

a.site-title {
    display: block;
    float: right;
}

 

I have:

.mainlogo-img {
    display: block;
    float: right;
}

Go to the full post


  • Please log in to reply
23 replies to this topic

#21 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 07:16 PM

OK - a bit more digging and it looks like

.section-branding .icons { right:0px; }

in pagelines-compiled-css is the problem.

 

What I need to do is clear this as opposed to override it with another value using inline css which just moves the icons away from the right edge but is not usefully 'responsive'. Not sure how one clears such a declaration and clear:right; is not hacking it...

 

Very surprised though that your approach works Rob as you still have right:0px set above applied to the social icons that need to go left!



#22 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 June 2013 - 09:57 PM

Hi there,

 

I've just gone into the options in Pagelines>site options>header and footer and removed the figures in the admin panel so it was blank and saved. Then checked to see if the inline figures were removed, they were. So added my own css to change the float the and align the icons. The final result I got they stayed within the container when responsive.

 

Please Login or Register to see this Hidden Content

 

I've only been testing this quickly but the css I used for the layout on my text site is below.

 
a.site-title {
    display: block;
    float: right;
}

.section-branding .icons {
    bottom: 50%;
    float: left !important;
    position: absolute;
    width: 100%;
}

.section-branding .icons a {
  float: left;}



#23 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 06 June 2013 - 09:29 PM   Best Answer

Thanks James - Working now!

 

I did have to change one class referenced in your code to move the site logo right-

instead of:

a.site-title {
    display: block;
    float: right;
}

 

I have:

.mainlogo-img {
    display: block;
    float: right;
}



#24 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 June 2013 - 09:44 PM

Excellent, glad you got it working :-)







Also tagged with one or more of these keywords: css, logo, float, brand, icons, header