Title: Topbar Layout Last modified: March 8, 2017 --- # Topbar Layout * [AussieErin](https://wordpress.org/support/users/aussieerin/) * (@aussieerin) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/) * Hi I’m having issues with the topbar layout and can’t work out how to resolve [http://sevenlittleaustralians.com/](http://sevenlittleaustralians.com/) * as you can see the widgets won’t align neatly in a row but are a jumble. I want the subscribe via email to sit with the rest of subscription widget. and the search widget and social widgets to all sit neatly in a row Also I’d like to remove the word social (at topbar and footer widget) * Much thanks! Erin Viewing 11 replies - 1 through 11 (of 11 total) * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8892332) * Hey, Can you tell me which widgets you’re using in your topbar? Thanks! * Hannah * Thread Starter [AussieErin](https://wordpress.org/support/users/aussieerin/) * (@aussieerin) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8892984) * subscribe email – jetpack social and search. * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8894783) * This css should align your subscription widget: * ``` #topbar-search form { float: none; } ``` * Are you using a different social widget in your topbar than in your footer? * Hannah * Thread Starter [AussieErin](https://wordpress.org/support/users/aussieerin/) * (@aussieerin) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8896429) * Hannah Thank you, that tidied things up a little, all three widgets now sit neatly in a row one above the other in the middle of the topbar. however is it possible to line them horizontally? and how do I get rid of the word social? * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8896598) * Are you using the virtue: social links widget? That by default should display inline. It also will allow you to leave the title blank (so the word social would now show). * Hannah * Thread Starter [AussieErin](https://wordpress.org/support/users/aussieerin/) * (@aussieerin) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8896662) * Hannah Excellent you just solved one annoyance! I was using jetpack social widget, changed to virtue and looking better. Thank you. * However the subscribe to email (jetpack) and search still nestle under each other. Which means the topbar is really deep. Is there any way for them to go horizontal? another suggestion? * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8897323) * Try paying around with this css: * ``` .topclass #subscribe-email input { width: 50%; float: left; margin-right: 10px; margin-left: 20px } span.topbar-widgettitle { margin-left: 20px; } .virtue_social_widget.clearfix { width: 20%; float: left; } ``` * Hope that’s helpful! * Hannah * Thread Starter [AussieErin](https://wordpress.org/support/users/aussieerin/) * (@aussieerin) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8897853) * Hannah It helped a bit, certainly looks more attractive but still not all there thought I should show you all the css I have added now as one of those codes could be hindering, what do you think? * .topbar-widget .virtue_social_widget a i { font-size: 22px; } #cat_nav { display: none; } body.blog #cat_nav, body.single-post #cat_nav { display: block; } .topbarmenu ul li a { font-size: 15px; line-height: 50px; } #topbar-search form { float: none; } #topbar-social form { float: none; } #topbar-subscription form { float: none; } .topclass #subscribe-email input { width: 50%; float: left; margin-right: 10px; margin-left: 20px } span.topbar-widgettitle { margin-left: 20px; } .virtue_social_widget. clearfix { width: 20%; float: left; } * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8900011) * Ok, try adding this: * ``` @media (min-width: 992px) { .col-md-6.col-sm-6.kad-topbar-left { width: 35%; } .col-md-6.col-sm-6.kad-topbar-right { width: 65%; } #topbar-search form { float: right; width: 50%; } span.topbar-widgettitle { line-height: 40px; } p#subscribe-email { margin: 0; } } ``` * How’s that? * Hannah * Thread Starter [AussieErin](https://wordpress.org/support/users/aussieerin/) * (@aussieerin) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8900041) * oh much better! thank you! nearly there, only thing is the ‘subscribe by email still isn’t sitting above the email form and button. how do we move it to the right? * [hannah](https://wordpress.org/support/users/hannahritner/) * (@hannahritner) * [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8909128) * Here ya go: * ``` div#subscribe-text { margin-left: 20px; } ``` * Hannah Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Topbar Layout’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/virtue/3.4.14/screenshot.png) * Virtue * [Support Threads](https://wordpress.org/support/theme/virtue/) * [Active Topics](https://wordpress.org/support/theme/virtue/active/) * [Unresolved Topics](https://wordpress.org/support/theme/virtue/unresolved/) * [Reviews](https://wordpress.org/support/theme/virtue/reviews/) * 11 replies * 2 participants * Last reply from: [hannah](https://wordpress.org/support/users/hannahritner/) * Last activity: [9 years ago](https://wordpress.org/support/topic/topbar-layout/#post-8909128) * Status: not resolved