I run a website where users can submit posts and receive alert messages (success or warning) when they do so. The alert messages are displayed at the top of the page using position: absolute to prevent them from affecting the layout when they appear. Everything is working fine, but I have encountered an issue where my SIGN UP/OUT button is appearing inside the alert box instead of behind it like the rest of the navigation elements.
Here is how the Sign Up button is showing in front of the alert message
I want the Sign Up/Out button to show behind the alert message, just like the other navigation elements.
Sign up button CSS:
.navbar-brand, .navbar-inverse .navbar-nav > li > a {
color: #778489;
text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);
font-weight: normal;
text-transform: uppercase;
font-size: 15px;
letter-spacing: .05em;
position: relative;
}
li.sign-up {
background: transparent;
border: none;
font-weight: 400;
border-radius: 0px;
box-shadow: none;
color: #ffffff;
text-decoration: none;
text-shadow: none;
padding: 0px 8px;
text-transform: uppercase;
}
Alertbox CSS
.alertMsg {
font-size: 16px;
line-height: 1.5em;
display: flex;
justify-content: center;
width: 100%;
transition: background 0.5s ease 0s;
height: 55px;
padding: 12px;
position: absolute;
}
.alertMsg i {
font-size: 18px;
margin-right: 10px;
margin-bottom: 5px;
}
Sign up HTML:
<li class="sign-up"><a data-toggle="modal" href="#signOut"><span class="white">Link Text</span></a></li>
I would greatly appreciate any help with this issue, as I have been struggling with it for some time. Thank you and have a great day!