Skip to main content
mathy_m-83
mathy_m-83
Known Participant
May 9, 2017
Answered

Remove white spaces from responsive menu

  • May 9, 2017
  • 2 replies
  • 895 views

Hello everybody.

I created a responsive menu and I can not remove the white spaces between my block. Someone have a solution?

here is the URL

test

Bests regards

    This topic has been closed for replies.
    Correct answer BenPleysier

    Because of the padding for the anchor element, you will need tp apply a negative margin to the list element as per Fighting the Space Between Inline Block Elements | CSS-Tricks

    2 replies

    O
    osgood_
    Brainiac
    May 10, 2017

    As Rob says, these days Flexbox makes this process reasonably simple, example below:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Flexbox Navigation</title>

    <style>

    .main-nav ul {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    margin: 0;

    padding: 0;

    }

    .main-nav li {

    list-style: none;

    }

    .main-nav a {

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 14px;

    text-decoration: none;

    background-color: #AF86A8;

    color: #fff;

    display: block;

    padding: 10px 15px;

    text-align: center;

    }

    .main-nav a:hover {

    background-color: #7A2870;

    }

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

    .main-nav ul {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    }   

    }

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

    .main-nav ul {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    background-color: #C69;

    }   

    }

    </style>

    </head>

    <body>

    <nav class="main-nav">

    <ul>

    <li><a href="#">Link One</a></li>

    <li><a href="#">Link Two</a></li>

    <li><a href="#">Link Three</a></li>

    <li><a href="#">Link Four</a></li>

    </ul>

    </nav>

    </body>

    mathy_m-83
    mathy_m-83Author
    Known Participant
    May 10, 2017

    If I want my current page have the same color than a:hover

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Flexbox Navigation</title>

    <style>

    .main-nav ul {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

    margin: 0;

    padding: 0;

    }

    .main-nav li {

    list-style: none;

    }

    .main-nav a {

    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    font-size: 14px;

    text-decoration: none;

    background-color: #AF86A8;

    color: #fff;

    display: block;

    padding: 10px 15px;

    text-align: center;

    }

    .main-nav a:hover {

    background-color: #7A2870;

    }

    .main-nav ul li a .current {

        background-color: #7A2870;

    }

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

    .main-nav ul {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    }  

    }

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

    .main-nav ul {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    background-color: #C69;

    }  

    }

    </style>

    </head>

    <body>

    <nav class="main-nav">

    <ul>

    <li><a href="#"><span class="current">Page One</span></a></li>

    <li><a href="#">Page Two</a></li>

    <li><a href="#">Page Three</a></li>

    <li><a href="#">Page Four</a></li>

    </ul>

    </nav>

    </body>

    </html>

    The color is only on the text.

    What is the solution for make color on the bloc?

    O
    osgood_
    Brainiac
    May 10, 2017

    There's lots of ways to produce a 'current page marker' - some more efficient than others.

    One way would be to give your <li> tags a unique class name like below:

    <li class="page-one"><a href="#">Page One</a></li>

    <li class="page-two"><a href="#">Page Two</a></li>

    <li class="page-three"><a href="#">Page Three</a></li>

    <li class="page-four"><a href="#">Page Four</a></li>

    Then on the 'Page One' page create a  <style></style> region and add the below (this would be specific to only that page)

    .page-one a {

    background-color: #7A2870;

    }

    on the 'Page Two' page you would use the below (this would be specific to only that page)

    .page-two a {

    background-color: #7A2870;

    }

    BenPleysier
    BenPleysierCorrect answer
    Adobe Expert
    May 9, 2017

    Because of the padding for the anchor element, you will need tp apply a negative margin to the list element as per Fighting the Space Between Inline Block Elements | CSS-Tricks

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Rob Hecker2
    Rob Hecker2
    Brainiac
    May 10, 2017

    The article Ben linked to is interesting. It was written in 2012 and lists flexbox as the last of several solutions. These days it should probably be the first solution as it really solves the problem without any strange coding or hacks.

      BenPleysier
      BenPleysier
      Adobe Expert
      May 10, 2017

      +1

      Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices