CODEWITHSUNDEEP
htmlcsssassbulma
robot43298
robot43298

Reputation: 31

Navigation Elements not lining up

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;
}
}

Upvotes: 2

Views: 50

Answers (2)

SHUBHAM DEKATE
SHUBHAM DEKATE

Reputation: 135

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.

Changes

Results

Upvotes: 1

Anurag S
Anurag S

Reputation: 145

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;

Upvotes: 1

Related Questions