Navigation Elements not lining up

Question

I am using bulma for a css framework and i ran into an interesting learning experience. I am trying to align the nav buttons to the bottom of the red field. However, as you can see they have shifted out of alignment. I have tried to apply an inline css style to them, however that does not correct the issue.

Can anyone point me in the right directory, it would be greatly appreciated.

https://codepen.io/robot43298/pen/WNGENNL

.navbar-end {
.button{
color: white;
font-size: 18px;
border: 2px dashed white;
background-color: red;
}
.dropdown-trigger{
margin-top: 15%;
display: inline;
vertical-align: bottom;
}
& li{
font-size: 16px;
}
}

user_11056952 · Answer

Try this,

Remove this margin

.navbar-end .dropdown-trigger {
       margin-top: 15%; /* Remove this margin */
       display: inline;
       vertical-align: bottom;
  }

and add some padding here as per your need

.dropdown{
     padding-top: 20px;
   }

This should do the trick;

user_13083443 · Answer

I tried looking your code in console, I added one line and removed one. and it seems to work as per you expectation. Do let me know if this what you wanted.

Navigation Elements not lining up

2 Answers