Action bar alignment

fmorakci · May 2017

Hi,

I need to align the action bar to the right next to the social icons, how can I do this?

url: qvidus.nl

Bryan · May 2017

Hi,

It is aligned? Please look: http://prntscr.com/f3iemw

thanks

fmorakci · May 2017

Hi,

Yes, I've navigated the forum and found you have helped with a bit of CSS you posted, so I've fixed that with the following:

#Action_bar .social { display: block; float: right;}

#Action_bar .contact_details { float: none; }

#Action_bar { text-align: right; }

The problem now is that I have aligned the action bar to the right, but the social icons are messed up. I see they are placed below the action bar, which falls under the fixed header. Could you help me out here?

Bryan · May 2017

Hi,
You are not understanding the FLOAT property correctly, if you set it to none, elements around it will go to a new line. It does not work like text-align. So, what you have to do is set the float from 'none' to 'left
' or right. Look on the screen: http://prntscr.com/f3y51g
You can set the social menu to left and contact details to right, or both to right.
thanks

fmorakci · May 2017

Okay, so I've done that. I've set all the elements to float right. What I get now is the social icons on the right side of the action bar, but ON THE LEFT of the contact details. Please see the screenshot. How do I fix this?

http://prnt.sc/f45d37

I'm a rookie at custom css, but I'm trying to learn. Thank you for your informative replies. I'm working hard to learn more every single day, and I love your themes.

Bryan · May 2017

It is not possible because the contact details is before the social icons in the HTML structure, this is why the floated elements are this way. Look: http://prntscr.com/f4cd6l

Action bar alignment

Comments

This website uses cookies