My website's navbar has a display: flex property to provide padding around the links, but it is causing some issues with overflow. For more details, you can check the JSfiddle link here: https://jsfiddle.net/Bradley_/3bhroby2/3/
I have noticed that my "Login" link gets cut off slightly, especially when zooming in or when there is overflow. Is there a way to fix this while maintaining its position and slight indentation? Any help would be appreciated.
Below is the CSS code:
body {
margin: 0;
overflow: visible;
}
#navbar {
overflow: hidden;
background-color: #D50000;
padding:13px 20px;
display: flex;
justify-content: flex-start;
}
#navbar a {
font-family: 'Exo', sans-serif;
font-size: 15px;
float: left;
color: #f2f2f2;
font-size: 15px;
padding:13px 20px;
text-decoration: none;
}
#navbar a:hover {
background-color: rgba(0,0,0, 0.03);
color: black;
}
#navbar a.active {
background-color: #e60000;
color: white;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.sticky + .content {
padding-top: 70px;
}
.right {
margin-left: auto;
}
Here is the HTML code snippet:
<div id="navbar" class="sticky">
<a class="active" href="index.php">Home</a>
<a href='matchday.php'>Matchday</a>
<a href='news.php'>News</a>
<a href='stats.php'>Stats</a>
<a href='gallery.php'>Gallery</a>
<a href='forum.php'>Forum</a>
<a href='more.php'>More...</a>
<?php if( isset($_SESSION['username']) && !empty($_SESSION['username']) )
{
?>
<a style="float:right;" class="open profile dropbtn" href="profile.php"></a>
<?php }else{ ?>
<a class="right" href="#about">Sign Up </a>
<a href="#about">Login</a>
<?php } ?>