I’ve created a bar above my menu that I would like to make full width so that it is the same width as my full width slider. Can you tell me what is incorrect with my current css?
#maptopbar {
position: fixed;
top: 0;
left 0;
right 0;
height: 50px;
font-size: 14px;
color :1c335d;
background: lightgrey;
}
Thank you very much!
Hello @marketimpress,
Thanks for writing in! We could not see the top bar in your site.
Meanwhile, the css code might have a missing line. Have it updated and use this:
maptopbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
font-size: 14px;
color: #1c335d;
background: lightgrey;
}
Please let us know how it goes.
Tried the 100% width and it still doesn’t go full screen to be the same width as the full width slider on the home page. Just made the topbar visible again.
Please advise.
Hi @marketimpress,
Please add this to Theme Options > CSS
.x-topbar-inner.x-container.max.width {
width: 100%;
max-width: none;
}
Hope it helps,
Cheers!
That worked perfectly, thank you fiech!
Couple more questions, now that it is full-width. I’d like to make it fixed in place and always stay at the top even when scrolling. I thought the position: fixed would do the trick, but it is now interfering with the menu and covering it when you scroll. How do I fix that?
Also, any recommendations to get this to align with equal space in between these four columns?
Sorry also noticed now that my content is reaching to the far edges as well. Want my content “Free Consultation”, Phone number to stay within the boundaries of the actual menu and not be full width, but the Blue Background Bar I do want to go full width.
Do I have to put the content in a seperate container? If so, can you please advise the best way to achieve that?
Hello @marketimpress,
The best way to make the topbar as fixed right above the menu bar, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)
(function($){
$('.x-topbar').prependTo('.x-navbar');
})(jQuery);
And by the way, you are having some issue with your topbar because you are using a <table> html tag inside a <p> tag which is the wrapper of the topbar content. This is invalid and not allowed. Sooner or later you will have problems and will get complicated. I would recommend that you update your topbar content and use the column shortcodes instead like this:
</p>[container id="maptopbar"][column type="1/4"] Icon 1 shortcode here [/column] [column type="1/4"] Icon 2 shortcode here [/column] [column type="1/4"] Icon 3 shortcode here [/column] [column type="1/4" last="true"] Icon 4 shortcode here [/column][/container]
And with this set up, you must also update the css code into this:
maptopbar {
font-size: 14px;
color: #1c335d;
background: lightgrey;
}
The fixed position will be taken cared by the JS code and the columns were by the use of container and column shortcodes.
We would loved to know if this has work for you. Thank you.
Thank for the extra JS code that did the trick to make it fixed to the top above the menu bar. Also, fixed the content to remove from table and put into columns.
Of course, whenever you fix one thing sometimes you notice another. There is now a significant gap between the top blue bar and the menu below it. Can I tighten that gap up?
Also, for the phone icon, I’m not sure why but the icon won’t show up. Tried other icons and had the same result, it won’t show. Help?
And last but not least, is there a way to have each column align the content differently? For example, I’d love to have that last column with the phone number alight text to right, but the first column I want to keep text aligned to left.
Hello @marketimpress,
There is a double wrapper for the topbar content bearing the same ID maptopbar. To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look and fix this issue?
To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Thank you.
Not a problem, will share shortly.
Hello @marketimpress,
I have logged in and made a series of changes.
I used this topbar content:
</p><div id="maptopbar" class="ptm pbm">
[container]
[column type="1/4"] [x_icon type="user"]
<a href="https://www.maderocpa.com/contact-us/#free-consultation" style="color:#FFFFFF;" > Free Consultation</a>[/column]
[column class="cs-ta-center" type="1/4"]
[x_icon type="calendar"]
<a href="https://calendly.com/chrismaderocpa" style="color:#FFFFFF;" >Schedule An Appointment</a> [/column]
[column class="cs-ta-center" type="1/4"] [x_icon type="paperclip"]
<a href= "https://maderocpa.leapfile.net" style="color:#FFFFFF;" >Send Files</a> [/column]
[column class="cs-ta-right" type="1/4" last="true"]
[x_icon type="phone"]
<a href="tel:9093751250" style="color:#FFFFFF;" >909-375-1250</a> [/column]
[/container]
</div><p>
And this custom css:
/* Topbar */
.x-topbar-inner.x-container.max.width{
width: 100%;
max-width: none;
}
#maptopbar {
font-size: 13px;
color: #ffffff;
background: #1c335d;
}
.x-topbar .x-social-global,
p:empty {
display: none;
}
@media(max-width: 767px){
.cs-ta-right {
text-align: center !important;
}
}
Please check your site and let us know if this works out for you.
Absolutely perfect!!! It is exactly what I was envisioning, thank you so much for your assistance.
Thank you!!! Thank you!!!
Glad we were able to help you 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.