spacings between li - CSS

Question

spacings between li - CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm trying to give a space in my menu so that it is centered with the content ... the content has width:80%; ...

HTML:

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav cl-effect-1">
  <li><a href="index.php">HOME</a></li>
  <li><a href="empresa.php">EMPRESA</a></li>
  <li><a href="servicos.php">SERVIÇOS</a></li>
  <li><a href="galeria.php">FOTOS</a></li>  
  <li class="imagem-menu"><a href="index.php"><img src="img/logo.png"></a></li>          
  <li><a href="eventos.php">NOSSOS EVENTOS</a></li>               
  <li><a href="agenda.php">AGENDA</a></li>
  <li><a href="contato.php">CONTATO</a></li>
  </ul>
</div>

CSS:

nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}

nav.navbar.navbar-default {
background: transparent;
border: none;
width: 80%;
margin: 0 auto;
}

li img {
margin: -110px 0 0 0;
width: 60%;
}

ul.nav.navbar-nav.cl-effect-1 {
margin-right: auto;
margin-left: auto;
float: none;
display: table;
text-align: center;
margin-top: 110px;
/* width: 80%; */
}

ul.nav.navbar-nav.cl-effect-1 li a {
font-size: 13px;
font-weight: bold;
font-family: Century Gothic;
}

nav a:hover{
    color: black;
    font-weight: bold;
    text-decoration: none;
}

css

asked by anonymous 30.07.2014 / 18:11

2 answers

0

Try to modify the float:

.navbar .navbar-nav {
  display: inline-block;
  float: none;
}

.navbar .navbar-collapse {
  text-align: center;
}

img {
  max-width: 133px;
  height: auto;
}

The menu is crashing because of the image.

And try to decrease font-size using media query.

@media (max-width: 778px) {
 .navbar .navbar-nav {
  font-size: 12px;
 }
}

31.07.2014 / 11:24

How to work with I18N in PHP and Symfony? Ratchet Fatal Error: Class 'MyApp \ Chat' not found in C: \ wamp \ www \ bin \ chat-server.php

score 1 · Accepted Answer

See if this is what you want:

nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}

.img-class
{
 float: left; 
 margin-right: 15px;
}

.collapse
{
    width: 700px;
}

li
{
     float: left;
     margin: 10px; 
}

nav.navbar.navbar-default {
background: transparent;
border: none;
width: 80%;
margin: 0 auto;
}

div img {

    width: 32px;
    height: 32px;

}

ul.nav.navbar-nav.cl-effect-1 {
margin-right: auto;
margin-left: auto;
float: none;
display: table;
text-align: center;
margin-top: 110px;
/* width: 80%; */
}

ul.nav.navbar-nav.cl-effect-1 li a {
font-size: 13px;
font-weight: bold;
font-family: Century Gothic;
}

nav a:hover{
    color: black;
    font-weight: bold;
    text-decoration: none;
}

Fiddle