CSS overwrites logo redirect

rbpeders · February 2020

Howdy! Some of the CSS below helped to enable an action button to show better on mobile. In testing, I have found it is now preventing users from tapping the logo to redirect to the home page.

For testing

Page to nav home from: http://www.bnfree.blog/startsaving/

Home page: http://www.bnfree.blog/

CSS in question:

.header-simple #Header a.responsive-menu-toggle { display: none; }

body #Top_bar .top_bar_left {

float: left;

width: 55% !important;

background: none !important;

}

.top_bar_right{

display: block !important;

}

.onsale { display:none; }

img{

border-radius:10px;

}

.logo img{

border-radius:unset !important;

}

#Footer { border-top: 1px solid #e4e9eb; }

Pablo · February 2020

Hello,

You should apply this code for a mobile only (@media-query for px below 768px):

.top_bar_right{
width:145px;
float:right !important;
}

Thanks

rbpeders · February 2020

Works great! Thanks

rbpeders · February 2020

Jk, checked the desktop version and the action button becomes two lines like

Start

Saving

when I use the CSS above instead of the code

.top_bar_right{

display: block !important;

}

Bryan · February 2020

Unfortunately, it will come to two lines because it does not fit. We cannot do anything about that, by default the action button is hidden.

thanks

CSS overwrites logo redirect

Comments