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

Remove white spaces from responsive menu

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 is closed to new replies. Start a new post to keep the conversation going.
    BenPleysier
    BenPleysierCorrect answer
    Community 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!
    View reply

    8 replies

    osgood_
    Legend
    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>

    Translate
    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?

    Translate
    osgood_
    Legend
    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;

    }

    Translate
    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community 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

    Translate
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Rob Hecker2
    Rob Hecker2
    Legend
    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.

    Translate
      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      May 10, 2017

      +1

      Translate
      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