0

Trying to make the navigation align left and line break like a normal paragraph. At the moment it seems to break weirdly when hovering.

Example:

enter image description here

Hoping to achieve the below which is only working when I hover on a certain link.

enter image description here

Code:

@media screen and (max-width: 1024px) {

li {
    float: left;
    padding-right: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    display: inline-block.
}


li a:hover {
    border-bottom: 2px solid;
    padding-bottom: 1px;
}

nav.isotope-filters ul li a:active,
nav.isotope-filters ul li a.selected {
    border-bottom: 2px solid;
    padding-bottom: 1px;
}
}   

I though inline-block would resolve this issue but it's not.

1

1 Answer 1

1

float are the guilty. Don't use floats when there aren't nothing to float. And don't mix float with inline-block. Float transform all displays in block.

@media screen and (max-width: 1024px) {

  li {
    padding-right: 8px;
    font-size: 14px;
    margin-bottom: 20px;
    display: inline-block;
    float: none;
  }


  li a:hover {
    border-bottom: 2px solid;
    padding-bottom: 1px;
  }

  nav.isotope-filters ul li a:active,
  nav.isotope-filters ul li a.selected {
    border-bottom: 2px solid;
    padding-bottom: 1px;
  }
}   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.