Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #777621

    Let me start by saying I’ve already ready the previous posts on this topic from 2012 by outtacontext. Non of the code provided in that thread work. It seem silly that the social icons cover up my header image, but perhaps it’s only strange because of my header image.

    Anyway, I’d like to move the social icons to the top of the header as seen at http://www.rebelem.com, and I also want to preserve the way the icons reposition as I size down the screen.

    If this requires anything more than simply adding some code under “Additional CSS” on the Customize screen, please just say so because I’m completely ignorant when it comes to coding and was hoping this would be a simple tweak.

    Thanks

    #777626

    Hi FlightCrit,

    Would you mind providing a precise link to the page in question so we can take a closer look?

    Thank you!
    Sarah

    #777627

    Sure,

    http://www.tipsfromcrit.com

    I’d like it to look like http://rebelem.com/

    #777645

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file: 

    #top #header .social_bookmarks {
       right: -258px;
    }

    Please let us know if that fixes it for you.

    Best regards,
    Sarah

    #778114

    That worked perfectly, but now my header image won’t resize. I had my header images resized to fit the full width of header using the code

    img{
    width: 600px;
    }

    Also, is there a way to raise the sidebar up a little bit, as you can see at rebelem.com.

    Thanks for your help.

    #778130

    Hi,

    About your first question, Ive checked your site and I cant find the header images that you`re saying, may share with us some screenshots?

    Now, about the second question, to raise the sidebar up a little bit, add the following custom CSS code:

    .sidebar {
    position: relative;
    bottom: 100px;
    }
    

    To change the sidebar position, just increase or decrease the bottom property value.

    Best regards,
    John Torvik

    #778277

    Thank you John,

    I tried to add screen shots, but can’t figure out how to insert them here. Anyway, if you head back to http://www.tipsfromcrit.com, you’ll see what I’m trying to fix. You see that in full screen the social icons are position in the sidebar using the code I received from Sarah in a previous comment here. However, as you scale the screen down, you’ll notice the social icons don’t reposition, and ultimately are just cut off.

    If you look at the website http://www.rebelem.com, you can see how the social icons are position in the sidebar, and move to a position under the header image as the screen size is sized down.

    If this is becoming too much for support, and I need to seek out a web coder, just let me know.

    Thanks a bunch.
    Sean

    #778286

    Hi,
    I viewed your both sites at different screen sizes, phone to wide screen, and believe if you replace the above codes with this below it will meet your requirements:

    @media only screen and (max-width: 989px) and (min-width: 768px){
    #top #header .social_bookmarks {
        right: -232px!important; 
    }}
    @media only screen and (min-width: 1020px){
    #top #header .social_bookmarks {
        right: -285px!important; 
    }}
    .sidebar {
    position: relative;
    bottom: 50px;
    }

    Best regards,
    Mike

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

You must be logged in to reply to this topic.