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

#1 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 03 June 2013 - 04:46 PM

Hi

 

I am having trouble getting a site logo to sit top right in the header and social icons top left...

 

It -almost- works by setting custom CSS for the logo:

Please Login or Register to see this Hidden Content

and then 'branding options - social icons' Distance from the right in pixels to a large value such as 1000 (under 'site options' then 'header and footer')

 

The trouble with this approach is that the icons can be pushed off the edge of screen when narrowing the browser window or on a mobile platform...

 

Far from ideal anyhow. What would be a better way of achieving this?


  • assomibatrifs likes this

#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 03 June 2013 - 06:17 PM

Hi Catpage - please could we have a link to your site? 



#3 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 03 June 2013 - 09:47 PM

The site is on a development server and is not yet on a public facing URL.

 

So you can see what I mean here is an annotated screen-grab showing how the logo and social icons have had their positions reversed

 

swapped-header.jpg



#4 batman

batman

    Bat Learning

  • Members

  • 2167 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 03 June 2013 - 11:04 PM

Hi catpage

Please, you can try with, for example

 

.icons {margin-right: 68em;}
I believe that this is responsive when narrowing the browser window.


#5 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 03 June 2013 - 11:17 PM

Hi Batman, a good idea and a bit better... The social icons do still mess up as the window is narrowed. Initially they 'stack' one above another then slide off the left of screen only to re-appear stuck to the edge of screen at about the point the navbar changes to 'mobile' mode...

 

There must be a way of positioning them so they stay put...?



#6 James B

James B

    Advocate

  • Members

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

Posted 03 June 2013 - 11:22 PM

Hi there,

 

You can give them absolute positioning.

 

 

.section-branding .icons {     bottom: 50%;     position: absolute !important;     right: 0; }

 



#7 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 11:25 AM

Hi James

 

I can't get your code to work. Changed to left:0 but still the social icons get positioned at the right of the header pretty much underneath the logo?



#8 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 04 June 2013 - 12:42 PM

Catpage - could you take a screen shot of what happens when you use James' code please? 



#9 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 01:49 PM

Please Login or Register to see this Hidden Content

produces:

 

swapped-header2.png

 

There is no change when substituting right:0 for  left:0

I have tried not using the float:right but have not found an alternative that works.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 02:40 PM

Hi,

 

If you go to Dashboard > PageLines > Site Options > Header And Footer you can adjust the horizontal position.  Check here on that settings panel:

Branding Section - Social Icon Position

 

Under: Distance From Right (in pixels)

 

Set the value to 800px to test it. That should move the social icons far left, leaving the branding on the right.



#11 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 02:50 PM

Um, yes... this is where I started this thread; with a value of 1000 moving the social icons left. The thing is this is not a 'responsive' solution as they vanish from the page as the window is sized and I imagine on mobile platforms.

 

More recent posts have been looking for a css based solution (so the 'distance' entry fields to adjust the horizontal position in the panel are empty).



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 03:17 PM

Most of the custom CSS solutions are not to reposition, but to replace and position unique social icons.  Have you considered just going that route?



#13 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 04:06 PM

I think you are suggesting disabling the 'default' social icons and coding some custom ones is that correct?  I imagine this should give better control if there is no way of handling the default ones better when they are displayed on the left..



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 04:56 PM

Okay,

 

I found this CSS:

Please Login or Register to see this Hidden Content

If I change position to "relative" instead of absolute, and add "float: left;"  then the icon moves flush left in the header.  Ignore, please my other settings as they're custom, most likely, to my site.



#15 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 05:05 PM

Nope - still no good for me. Looks like the second screengrab above. Icons remaining resolutely on the right under the logo.

 

Perhaps there is an interaction with the way the logo is positioned?

Please Login or Register to see this Hidden Content



#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 05:18 PM

Without seeing a live site, it's impossible to identify if there's some other element affecting this.  It's like trying to perform brain surgery in a dark room with sunglasses on.



#17 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 05:21 PM

A scary analogy!

 

If you try to reverse social icons and logo on a 'default' site what works for you AND retains fluid layout?



#18 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 05:39 PM

Well, that code I gave you was tested and worked with the changes I stated had to be made.  Depending on the size of your branding image, that should align right easily.

 

Yes, it is a scary analogy. But without seeing a live site to check, that's what it is, really. Diagnosis and surgical solutions in the dark. Scary? Frightening! :D



#19 catpage

catpage

    Advanced Member

  • Members
  • 33 posts
  • Country: Country Flag

Posted 04 June 2013 - 06:02 PM

Hi Rob

 

As I understand it the code you show above sets your social icons to the left.  What code are you using to set the logo to the right?



#20 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 June 2013 - 06:21 PM

I did not do that as you said that was working.

 

If you use Firebug to find these elements, or Chrome's Inspection Tools, that will help you do this much faster and easier:

I found this:

.section-branding .mainlogo-link, .section-branding .mainlogo-img {
    displayblock;
    max-width100%;
}

 

I added:

    floatright;
 






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