Title: Fullwidth topbar Last modified: February 28, 2018 --- # Fullwidth topbar * Resolved [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/) * Hi, * I’m trying to use the topbar as a hello bar. So I enabled the widget area in left of the sidebar and added the following CSS * ``` .kad-topbar-left { width: 100%; } .kad-topbar-right { width: 0%; } ``` * The topbar is full width now but the primary many gets pushed down under the logo. * What’s the correct code for having the left widget in the topbar at 100% width? * Thanks, Laura Viewing 15 replies - 1 through 15 (of 21 total) 1 [2](https://wordpress.org/support/topic/fullwidth-topbar/page/2/?output_format=md) [→](https://wordpress.org/support/topic/fullwidth-topbar/page/2/?output_format=md) * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10024805) * Can you please post a link? * thanks, kevin * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10024935) * Take the homepage for example [https://www.bylauraiancu.com/](https://www.bylauraiancu.com/) * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10024977) * I’m not seeing the topbar on that site. Did you disable it? * -Kevin * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10024988) * It’s enabled but the previous version without the topbar might be still in the cache. I cleared the cache so it should catch up in a few minutes. * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025082) * This other page seems to have caught up [https://www.bylauraiancu.com/blog](https://www.bylauraiancu.com/blog) * I only see the issue mentioned above in Chrome * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025094) * Another issue I’ve noticed is that since the text is longer, it gets on top of the logo on mobile devices. * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025122) * Something else is breaking the layout of your header. When I change the width of the topbar left and right back to default, the layout is still broken. * Can you disable your site’s cache so I can view your custom CSS? * -kevin * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025140) * I found the issue. Remove the padding and margins from the topbar widget in the page builder settings, and you should be set. Let me know if that works for you. * -Kevin * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025141) * I disabled the cache for this post [https://www.bylauraiancu.com/gift-guide-for-female-entrepreneurs](https://www.bylauraiancu.com/gift-guide-for-female-entrepreneurs) * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025148) * Not sure what you mean by ‘page builder settings’… * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025167) * I mean the site origin editor widget, sorry I got it confused with the layout builder widget. * -Kevin * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025186) * Sorry, but I still don’t know what I have to do. Do I have to go to Settings >> Page builder and do something there? * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025227) * You should be able to remove it in the widget, but if you not, this CSS should take care of it: * ``` .topbar-widget p { padding-bottom: 0; margin-bottom: 0; } ``` * -Kevin * Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * (@lauratraveler) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025236) * Thanks, Kevin, that indeed fixed the first issue and the primary sidebar stays where it’s supposed to. * However, on mobile devices, the text from the topbar gets on top of the logo ( in Safari) and the background of the topbar doesn’t expand with the text. Is there anything that can be done about this as well? * [Kevin](https://wordpress.org/support/users/jx-3p/) * (@jx-3p) * [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/#post-10025285) * Try this CSS: * ``` @media (min-width: 328px) and (max-width: 992px) { div#topbar { height: 70px; } } @media (max-width: 327px) { div#topbar { height: 110px; } } @media (max-width: 436px) { .topbar-widget p { font-size: 12px; } } ``` * Let me know if that works for you. * -Kevin Viewing 15 replies - 1 through 15 (of 21 total) 1 [2](https://wordpress.org/support/topic/fullwidth-topbar/page/2/?output_format=md) [→](https://wordpress.org/support/topic/fullwidth-topbar/page/2/?output_format=md) The topic ‘Fullwidth topbar’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/pinnacle/1.8.10/screenshot.png) * Pinnacle * [Support Threads](https://wordpress.org/support/theme/pinnacle/) * [Active Topics](https://wordpress.org/support/theme/pinnacle/active/) * [Unresolved Topics](https://wordpress.org/support/theme/pinnacle/unresolved/) * [Reviews](https://wordpress.org/support/theme/pinnacle/reviews/) * 21 replies * 3 participants * Last reply from: [lauratraveler](https://wordpress.org/support/users/lauratraveler/) * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/fullwidth-topbar/page/2/#post-10027100) * Status: resolved