Hi,
I followed instructions and added login/register links to the top bar (Thanks!).
However, the top bar is NOT responsive anymore after the addition. Meaning the login/register division would overlap with phone-info and language selector when screen is resized to a smaller window. It looks even uglier on iPad and tablets.
Question: How can I make the new links responsive? In other words, make them move along with the phone-info and language selector?
This is what I added,
In header.php file, in //display the small submenu, right below “echo $nav;” and before “$phone = avia_get_option(‘phone’);”
echo “<div class=’login_buttons’>LOGIN | REGISTER</div>”;
and then added,
.login_buttons{
position: absolute;
top: 5px;
left: 750px;
}
to the custom.css.
I also tried to use position: float, which is what’s used for phone-info but that would put “login/register” links right under the social links on the left.
BTW, I tried to add css code to the Quick CSS field, saved it, but page would never take the css codes. Only takes it when it’s written in the custom.css file. This is the second time it happened. The first time was when Devin and Josue were helping me with a custom portfolio-box css code. I tried 10+ times to add the code, thought was there but Devin found out it was never loaded. Not sure what might have caused this issue.
Thanks,
Hey!
Please post a link to your website. We’ll investigate the css code and try to find a solution.
Regards,
Peter
Hi yukanl,
You can use this instead:
.login_buttons {
position: absolute;
top: 15%;
left: 50%;
}
Then add a second snippet to the mobile media query in your custom.css file:
.login_buttons {
position: absolute;
top: 50%;
left: 40%;
}
Regards,
Devin
Hi Devin,
It works! :)
Thank you for your help.