Top bar is not clickable on mobile
Hello,
Using the Betheme > Global > Hooks menu, I created a Top bar. It works fine on desktop, but the links and button are not clickable on mobile.
Thank you for your help in advance.
Murat
Note: I used the following code in the Top field under the Betheme>Global>Hooks:
<br />
<div style="float: left; width: 70%; padding-top: 5px;"> <p style="text-align: center;"><a href="tel:+1(949)346-7048"> <span style="color:#dedede;">(949) 346-7048</span></a> | <a href="mailto:[email protected]"><span style="color:#dedede;">[email protected]</span></a></p> </div>
<div style=" float: left; width: 30%;">[button title="Get a Quote" link="/contact" align="center" icon="" icon_position="right" color="#C5803B" font_color="#ffffff" size="1" full_width="0"] </div>
I also added the following code to the Custom CSS:
/* Top Bar color */
#Header_creative #Top_bar .top_bar_right .top-bar-right-button, #Header_creative #Top_bar .top_bar_right .top-bar-right-input {
background-color:#15191F !important;
color:#ffffff;
}
#Top_bar a.responsive-menu-toggle {
margin: 30px 0 0 0 !important;
}
/* Mobile Logo */
#Header_creative #Top_bar .logo #logo, #Header_creative #Top_bar .logo .custom-logo-link {
padding: 50px 0 0 0 !important;
}
/* Mobile Sticky Logo */
.mobile-sticky #Top_bar.is-sticky #logo img.logo-mobile-sticky {
margin-top: -100px !important;
}
Comments
Hello,
Right now, the Top Bar you created is overlapped with the header box.
If you move this whole box down with the CSS code, the button and links in Top Bar will be clickable.
Do you need help with writing such a code?
Best regards
Since it's only on the mobile view, I couldn't figure it out. I would appreciate if you can give me the css code.
Thank you,
Murat
Please, try the following code:
@media only screen and (max-width: 768px) { #Header_creative{ top: 60px!important; } }Thanks
Thank you so much.