My site topbar height has increased and when I do set it to a maximum height of say 26px, that works on desktop, but doesn’t display well on smaller screen sizes as the topbar content then displays over the site navigation and logo.
Is there any way to make the topbar height responsive depending on screen size, so that there isn’t a huge amount of space as can be seen at present on the desktop version so that the top bar displays on smaller screens?
Hello @sewotherspoon,
Thanks for writing in!
You have encounter the issue after you have inserted an invalid topbar content. You are meant to insert only plain text. You cannot use <p> tag on the topbar content.
Please have your topbar content updated instead.
See the secure note.
Many thanks. However, said code doesn’t keep the formatting, and the text all runs together. I’ve uploaded a screen shot of how your code appears. (see separate entry below).
Hello @sewotherspoon,
The Topbar content is already floated to the left. To override this, you need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use. And then you need to add CSS code into X > Theme Options > CSS.
.x-topbar .p-info {
float: none;
}
And finally, you can update the topbar content into this:
<span style="left"> Coronavirus: For information on T.B. Mackay service updates relating to COVID-19 <a href="https://www.tbmes.co.uk/about-us/coronavirus">click here</a></span><span class="right">CALL US ON <a href="tel:0131 552 6103"><strong>0131 552 6103</strong></a></span>
We cannot use your current code because it is invalid and incorrect. It may cause further issues later on.
Best Regards.
I’ve updated the code to the above. Many thanks
You’re welcome!
It’s good to know that it has worked for you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.