Need help? Check out our Support site, then


Moving search widget and social media buttons to the top of page

  1. Hi,

    So right now my social media buttons are below my menu bar and I would love to move them to the very top of the page (top right corner) because they are cutting off blog post titles. I'd love to have my social media buttons in the top right with the search widget beside it.

    How can I do that? I would really appreciate your help. Thanks so much in advance :)

    The blog I need help with is ariannasrandomthoughts.com.

  2. fabianapsimoes
    Staff

    Hi there,

    Could you give the following CSS a try and see if it does what you want?

    #header {
        margin-top: 40px;
    }
    #menu {
        top: 492px;
    }
    #wrapper-content {
        margin-top: -436px;
        padding-top: 515px;
    }
    #content {
        position: static;
    }
    #search-5.widget {
        background: none !important;
        min-height: 20px;
        position: absolute;
        right: 175px;
        top: 10px;
    }
    #search-5 h3 {
        display: none;
    }
    #secondary #text-7 {
        right: 12px;
        top: 10px;
    }

    It would be good to merge this CSS with what is already in your custom stylesheet. You can do this by checking if there are two blocks of CSS using the same selector (the part that comes before the curly braces). This will make it easier for you to edit your custom stylesheet in the future, since you'll avoid having different CSS rules making changes to your elements. Let me know in case you need help with that :)

  3. Hi @fabianapsimoes - thanks so much - that is exactly what I wanted! Much appreciated. I think it looks fantastic.

    I'd also love to put the blog subscription widget in the top left corner. Any chance you could please help with that too? Sorry to ask for more - I just want to fill the blank spot. I love designing the site. Thanks for helping me.

    Thanks also for the help regarding the style sheet. I will have a look at that later tonight.

  4. @ariannasrandomthoughts, give this a try. It works with Firebug on your site, but doesn't work as cleanly on my test site. There are two ways the subscribe widget appears:

    1) to those logged into WordPress.com, there is just a message and the subscribe button.

    2) To WordPress.com users that have already subscribed, there is a message telling them they are following the blog.

    3) For those that are not logged in, or have not followed the blog, there is the field they can enter their email address into and a message saying something like "Join two other followers".

    Give it a try and we can make further adjustments. You will have to look at it logged in and also logged out.

    .widget-area #blog_subscription-4 {
        background: none repeat scroll 0 0 transparent !important;
        position: absolute;
        top: 0;
        width: 40%;
    }
    .widget-area #blog_subscription-4 h3 {
        display: none;
    }
    .widget-area #blog_subscription-4 input[type="submit"] {
        float: right;
        left: -44px;
        position: relative;
        top: -46px;
    }
    .widget-area #blog_subscription-4 #subscribe-field {
        height: 26px !important;
        margin-top: 11px;
        max-width: 45%;
    }
  5. Thanks @thesacredpath - so far it looks good for non-Wordpress.com followers. I unsubscribed and then subscribed - for wordpress.com subscribers though the subscribe button seems to appear above the header aread where its blue

  6. Ok, three browsers open and a bunch of logging in and logging out and this should do the trick. Delete the stuff I gave you and paste in this and see how it looks. I had to use pseudo CSS to get everything to align as it should. Not all of the code changed, but it would probably be easier to just replace everything I gave you before.

    .widget-area #blog_subscription-4 {
    	background: none !important;
    	position: absolute;
    	top: 0;
    	width: 32%;
    }
    
    .widget-area #blog_subscription-4 h3 {
    	display: none;
    }
    
    .widget-area #blog_subscription-4 p:nth-of-type(2) {
    	float: right;
    	margin-right: 0;
    	margin-top: 20px;
    }
    
    .widget-area #blog_subscription-4 p:nth-of-type(1) {
    	margin-left: 0;
    	margin-top: 20px;
    	float: left;
    }
    
    #blog_subscription-4 #subscribe-field {
    height: 25px;
    }
  7. Thanks so much @thesacredpath! Only thing is it seems to be at a different height than the search bar.
    Do you like the way the top is set up or should I have the social media buttons and search tool switched so it looks more even?

  8. A couple adjustments.

    First, change the % width in

    .widget-area #blog_subscription-4

    to 37% to make sure the button doesn't get bumped down to below the text input field. I just noticed that is happening on some browsers.

    Secondly, change the top margin in the following two rules to 10px. to align them with the search stuff.

    .widget-area #blog_subscription-4 p:nth-of-type(2)
    .widget-area #blog_subscription-4 p:nth-of-type(1)

    You could try switching the social and search to see how things look. It may look more balanced.

  9. Works perfectly! Thank you - I really appreciate it.

    Last question I agree with you about it looking more balanced when it is switched. Sorry if this seems silly but how do I do that?

  10. Now - the space where you put your email address in and the button are far apart.

  11. Ok, in

    .widget-area #blog_subscription-4 p:nth-of-type(2)

    change the float to left instead of right. Make sure and check logged in and logged out.

  12. Thanks so much. One more small thing and then it's done - I agree with you about it looking more balanced when the social media buttons and search tool are switched in position. Sorry if this seems silly but how do I do that?

  13. You are welcome.

    To exchange the position of search and the social icons, replace the like rules in your custom CSS with the following.

    #secondary #text-7 {
        background: none repeat scroll 0 0 transparent !important;
        position: absolute;
        right: 280px !important;
        top: -10px;
    }
    
    #search-5.widget {
        background: none repeat scroll 0 0 transparent !important;
        min-height: 20px;
        position: absolute;
        right: 0;
        top: 10px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic