Remove white spaces from responsive menu

Report · May 09, 2017

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

Bests regards

Report · May 09, 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!

Report · May 09, 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.

Report · May 09, 2017

+1

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 10, 2017

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

<!DOCTYPE html>

<html>

<head>

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

<ul>

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

</ul>

</nav>

</body>

Report · May 10, 2017

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

<!DOCTYPE html>

<html>

<head>

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

<ul>

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

</ul>

</nav>

</body>

</html>

The color is only on the text.

What is the solution for make color on the bloc?

Report · 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-three"><a href="#">Page Three</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;

}

Report · May 10, 2017

that work with this script

<!DOCTYPE html>

<html>

<head>

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

}

.current a {

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>

<ul>

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

</ul>

</nav>

</body>

</html>

but it don't work with that script

<!doctype html>

<html>

<head>

<title>Vivez Medoc</title>

<style>

@charset "UTF-8";

/* CSS Document */

html,

html * {

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";

}

header {

padding: 10px;

}

img {

width: 100%;

max-width: 100%;

height: auto;

vertical-align: middle;

}

body {

margin-left: auto;

margin-right: auto;

background: #FFFFFF;

font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.style-logo {

margin-left: auto;

margin-right: auto;

display: block;

width: 150px;

}

.style-slogan {

margin-left: auto;

margin-right: auto;

display: block;

width: 350px;

}

.style-nav ul {

list-style-type: none;

}

.style-nav ul li a {

text-decoration: none;

color: #FFFFFF;

text-align: center;

display: block;

text-transform: inherit;

padding: 5px 25px;

background-color: #AF86A8;

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

font-size: 14px;

/*ul.white-space-fix li */

margin-right: -5px;

}

.style-nav ul li a:hover {

color: #FFFFFF;

background-color: #7A2870;

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

}

.current a {

background-color: #7A2870;

}

/*Tablet View*/

@media (min-width: 768px){

.style-logo {

margin-left: auto;

margin-right: auto;

display: block;

width: 200px;

}

.style-slogan{

width: 450px;

}

.style-nav ul li {

display: inline-block;

}

.style-nav ul {

text-align: center;

}

/*Desktop View*/

@media (min-width: 1024px){

body {

max-width: 1200px;

}

.style-logo {

float: left;

width: 250px;

}

.style-nav {

float: right;

}

.style-slogan {

float: right;

width: 500px;

}

</style>

</head>

<body>

<ul>

<li><a href="#">Ma commune</a></li>

<li><a href="#">Bonnes adresses</a></li>

<li><a href="#">Se distraire</a></li>

</ul>

</div>

</header>

</body>

</html>

Report · May 10, 2017

I found the solution. in my script I must write

.style-nav .current a {

background-color: #7A2870;

}

<!doctype html>

<html>

<head>

<title>Vivez Medoc</title>

<style>

@charset "UTF-8";

/* CSS Document */

html,

html * {

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";

}

header {

padding: 10px;

}

img {

width: 100%;

max-width: 100%;

height: auto;

vertical-align: middle;

}

body {

margin-left: auto;

margin-right: auto;

background: #FFFFFF;

font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.style-logo {

margin-left: auto;

margin-right: auto;

display: block;

width: 150px;

}

.style-slogan {

margin-left: auto;

margin-right: auto;

display: block;

width: 350px;

}

.style-nav ul {

list-style-type: none;

}

.style-nav ul li a {

text-decoration: none;

color: #FFFFFF;

text-align: center;

display: block;

text-transform: inherit;

padding: 5px 25px;

background-color: #AF86A8;

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

font-size: 14px;

/*ul.white-space-fix li */

margin-right: -5px;

}

.style-nav ul li a:hover {

color: #FFFFFF;

background-color: #7A2870;

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

}

.style-nav .current a {

background-color: #7A2870;

}

/*Tablet View*/

@media (min-width: 768px){

.style-logo {

margin-left: auto;

margin-right: auto;

display: block;

width: 200px;

}

.style-slogan{

width: 450px;

}

.style-nav ul li {

display: inline-block;

}

.style-nav ul {

text-align: center;

}

/*Desktop View*/

@media (min-width: 1024px){

body {

max-width: 1200px;

}

.style-logo {

float: left;

width: 250px;

}

.style-nav {

float: right;

}

.style-slogan {

float: right;

width: 500px;

}

</style>

</head>

<body>

<ul>

<li><a href="#">Ma commune</a></li>

<li><a href="#">Bonnes adresses</a></li>

<li><a href="#">Se distraire</a></li>

</ul>

</div>

</header>

</body>

</html>

thank's for you help

Bests regards

Remove white spaces from responsive menu

1 Correct answer