Hi, I’m working on a site and for a smaller screen size, I want the top bar and social media icons to be centred and to be on the same line as each other (top bar info on the left and social media icons to the right but with only about 50px gap in between), but not to overlap as they currently do! I’ve tried to correct this with CSS, but can’t figure it out! I hope you can help please!
Here’s a screen grab for your reference:
I’ll put the URL in a secure note as it’s on a temp link.
Thanks!
Hello @core365,
Thanks for writing in!
To resolve your issue, please do this:
1.) Please have this code remove:
.x-topbar {
height: 33px !important;
}
and update it using this code instead:
.x-topbar {
height: auto !important;
}
2.) You will also need to remove this code:
.x-topbar .x-social-global {
float: right;
clear: both;
position: relative;
top: -30px;
}
and you use this updated code:
.x-topbar .x-social-global {
float: none;
clear: both;
position: relative;
top: auto;
}
The final look will be like this:
Hope this helps.
Hi, many thanks for that, however I wanted the social media icons and the ‘Let’s Chat 024 7660 1351’ on the same line, side by side each other and centred - please see mock up of screen grab (hope it’s possible to do!):
Thanks!
Hello @core365,
You will need to add this code as well:
.x-topbar-inner.x-container.max.width {
text-align: center;
}
And then update the css code blocks that you added:
.x-topbar .p-info {
text-align: center;
float: none;
width: 100%;
}
.x-topbar .x-social-global {
float: none;
clear: both;
position: relative;
top: auto;
}
And replace it with this:
.x-topbar .p-info {
text-align: center;
float: none;
width: auto;
display: inline-block;
}
.x-topbar .x-social-global {
float: none;
clear: both;
position: relative;
top: auto;
width: auto;
display: inline-block;
}
We would love to know if this has worked for you. Thank you.
Hi @RueNel,
That’s great thanks! I just tweaked it slightly so that the display for both was inline-flex instead of inline-block so it automatically adjusted for mobile devices.
Just one other thing, when you view it on a mobile device and scroll down, a gap appears under the top bar and moves the logo and nav button down and I can’t figure out how to sort it! I’ll be grateful if you’ll be able to take a look for me please!
Thanks!
Hey @core365,
That’s happening because of the script added in your Global JS section which is making your topbar sticky. Making Navbar or Topbar sticky in mobile devices is not recommended at all because this introduces header layout issues as you’re currently facing It’s best to remove the script and related custom CSS to fix the issue, however if you need to keep the Topbar sticky for some reason then first find and remove the following CSS code:
.x-topbar {
height: 46px !important;
padding-top: 3px;
}
Then add the following code in the Theme Options > JS:
function stop_jumps() {
jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
stop_jumps();
});
jQuery(window).resize(function(){
stop_jumps();
});
Please note that it’s only a work around and serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Hope this helps!
Hi, thanks, I’ve done as you suggested, but when you view it at LG 980px-1199px it still jumps and creates a gap. It’s also affected the top of the other pages (not the Home page as that has a slider) as it’s not displaying the image in full that’s under the nav bar until you scroll down the screen.
The mobile nav bar button has stopped working at LG 980px-1199px now too, when you click on it, nothing happens.
Cheers
Hi @core365,
You need to adjust this top value.
That value needs to offset the height of the topbar (48px) (and adminbar if login)
Thanks,
Hi, that’s great, thanks!
However, there are a couple of other things that I’m having issues with if you don’t mind helping me out with please:
Cheers
Hi @core365,
Navbar doesn’t stop working. By default on this screensize, mobile menu is not working because it is hidden. Now, you did adjustment to switch from desktop menu to mobile menu. The adjustment is not enough. Please try to add this too:
@media (max-width: 1199px){
.x-nav-wrap.mobile {
display: block;
}
}
Please note that maintenance of customization is outside the scope of our support.
Please use px value on the GAP element that you have added. Change 60% to a PX unit. See this: https://screencast-o-matic.com/watch/cYV3XhvLOZ
Hope this helps.
Hi @Lely,
Cheers
Hello @core365,
Please update the code and use this instead:
@media (max-width: 1199px){
.x-nav-wrap.mobile {
display: none;
}
.x-nav-wrap.mobile.x-collapsed {
display: block;
}
}
Please let us know if this works out for you.
Hi, the code you gave didn’t sort it either I’m afraid, so I went through all the CSS and removed parts that weren’t needed - this is based on a previous website, so there was some CSS in there that wasn’t relevant, and then I removed the JS code and copied some CSS from a different website that you previously gave me some CSS code for and it sorted it!
Many thanks for all your help and time on this, it’s much appreciated.
Thanks!
Hey @core365,
You are most welcome. It is good to know that you have sorted out your issue already.
If you need anything else we can help you with, don’t hesitate to open another thread.
Cheers.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.