Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #10225

    Hi,

    I need to change the location of social media icons to place them in the header, beside navigation menu (right hand).

    What files do I have to change to achieve my goal?

    Thanx in advance.

    #67314

    You need to remove the social media icons from footer.php (ul with the class “bookmarks”) and add the code to header.php (I’d insert it before following line:

    <!--end head-->

    Maybe you need to adjust the css code a bit.

    #67315

    Thanks for your answer, Dude.

    Indeed I was asking for CSS adjustments given that social media icons appears beneath the navigation menu instead of appearing beside navigation menu (right hand) after adding the code you suggested to header.php.

    Can you help me?

    #67316

    Hey!

    Hey! If you drop us a link to the site we will try to come up with a css snippet to position those icons ;)

    Regards,

    Kriesi

    #67317

    Hi,

    You can access my website following this link: http://www.jordisegusl.es/wordpress

    Thanks!

    #67318

    Hi,

    In your style.css

    Find this line:

    #wrapper_head

    The Code would look something like this:

    Code:
    #wrapper_head {
    position: relative;
    z-index: 100;
    overflow: visible;
    }

    Replace it with this:

    Code:
    #wrapper_head {
    position: relative;
    z-index: 100;
    overflow: visible;
    padding-bottom: 20px;
    }
    #head > ul.social_bookmarks {
    bottom: -16px;
    position: absolute;
    right: 0;
    }

    If you want to adjust it a little bit to the left, just change the value of the right to something like 5px or so.

    Hope this helps. :)

    Regards,

    Ismael

    #67319

    I’ve introduced this changes in style.css file but nothing have changed… what else can I do?

    #67320

    Hi!

    Please try to drop the line in your custom.css instead of style.css, my bad.

    Best regards,

    Ismael

    #67321

    I don’t have any custom.css file… I use to make changes in style.css.

    I have to say that, in fact, there is a difference before and after I performed the change you suggested but media social icons bar is still appearing beneath the navigation menu bar.

    How can I put it beside (right hand) the menu bar?

    #67322

    Try to use following code instead:

    #head > ul.social_bookmarks {
    bottom: 27px;
    position: absolute;
    right: -111px;
    }

    Just a side note: the social icons exceed the “standard” page width of 980px now and user with small screens might have problems to view it properly now.

    #67323

    Thanks for your last suggestion. It worked but you were right: after that last change the social icons exceeded the “standard” page width of 980px. To correct this I moved the whole navigation bar towards left and I got it all fit in 980px wide.

    Finally the modififed code in style.css looks like this:

    Code:
    #wrapper_head{
    position: relative;
    z-index: 100;
    overflow: visible;
    padding-bottom: 0px;
    }
    #head > ul.social_bookmarks {
    bottom: 27px;
    position: absolute;
    right: 0px;
    }
    #top .nav{
    height:30px;
    line-height:30px;
    padding-left:13px;
    right:100px;
    position:absolute;
    z-index:100;
    }

    Thanks for all! ;-)

    #67324

    Hi,

    We’re glad to hear that it worked. :)

    Cheers,

    Ismael

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

The topic ‘Social media icons beside the navigation menu’ is closed to new replies.