I’ve spent hours searing the forums and trying all kinds CSS adds. Nothing works.
I want to right justify the menu and make the top bar sticky/fixed.
I would also like both of those (the topbar and logo/navbar) to be 100% width with left and right padding of 20px.
Thank you in advance for your help.
Hi there,
Please try this code:
.x-topbar {
position: fixed;
width: 100%;
}
.x-navbar {
margin-top: 44px;
}
header .x-topbar .x-topbar-inner,
.x-navbar .x-navbar-inner .x-container {
max-width: 100%;
width: 100%;
padding: 0 20px;
}
Hope this helps.
You are awsome! That works perfectly once I scroll but calling up the page it initally looks like this…how do I fix that? https://leaplearn.net
BEFORE SCROLL:
AFTER SCROLL:
Hi Tanya,
Please update this code:
.x-topbar {
position: fixed;
width: 100%;
}
to
.x-topbar {
position: fixed;
width: 100%;
top: 0;
}
Hope this helps.
Hi Jade! That worked! Thank you so very much! Only one more question on this…
I am using http://responsivedesignchecker.com to check out how the site is coming along and looking on different screen sizes along with the built in tool in Cornerstone. When they look right on both, the feed back I am getting from users is that things are on point. After inserting the code I checked and screen sizes 600px & less, the header looks like this (looks the same on my phone //iphone X//…
Is it possible to have the buttons float center under the “reach us at” and increase the width of the top par to accommodate that and make the logo/nav bar sticky?
This is the work around code I have in there for the buttons in Customizer>>Header>>Topbar Content
Reach us at: info@leaplearn.net
Hi @tanyaLANDdurant,
You have this existing custom CSS which causing that
.x-topbar {
height: 53px;
min-height: 0;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
You have to add another CSS that overrides it on mobile, please add this as well
@media ( max-width: 767px ) {
.x-topbar {
height: 83px;
}
.x-navbar {
margin-top: 83px;
}
}
Then the button alignment is because of styling you have directly added to it
<div style="display: flex; float: right; vertical-align: center;">
It should be like this
<div class="top-buttons">
then just add another CSS so it will only take effect on desktop
.top-buttons {
display: flex;
align-items: center;
justify-content: center;
}
@media ( min-width: 768px ) {
.top-buttons {
float: right;
vertical-align: center;
}
}
Please also check this too
https://developers.google.com/web/tools/chrome-devtools/beginners/css as it may help you create your own CSS in the future.
Hope this helps.
Thank you for all of your help and for the link I will absolutely do that.
All of that worked except this - the css you provided with the mobile navbar margin to be the same as the topbar height makes perfect sense but its not working the mobile navbar is tucked under the topbar a little (I did try different numbers but didn’t respond) and the navbar is not sticky anymore just the topbar.
And I have no idea what the faded light grey box is around the “reach us at…” text - Is that built in the theme? I would prefer to have it off of there.
Hi @tanyaLANDdurant,
To resolve the overlapping of topbar and navbar on mobile, please find this on your custom CSS
@media (max-width: 767px) {
.x-navbar {
margin-top: 83px;
}
}
And update to:
@media (max-width: 767px) {
.x-navbar-wrap .x-navbar {
margin-top: 83px;
}
.x-topbar .p-info {border: 0;}
}
That should also resolve the faded light grey box on the topbar, because of the added line:
.x-topbar .p-info {border: 0;}
Hope it helps,
Cheers!
Thank you all so very much! I really appreciate you helping me get that fixed!
We are delighted to assist you with this.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.