li - CSS spacing

Asked

Viewed 16,510 times

0

I’m trying to space my menu so it’s centered on the content... the content has width:80%; ...

WEBSITE

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

  • Put at least the code on your menu...

  • Every question is the same thing, never puts the code, waits for someone to ask. I believe this is the basics for anyone to help you!

  • I’m going to...

  • @Cesarmiguel ta la

  • The menu is centered, the content is not...

  • Centralizes the <li>, not the <ul>, or leave the <li> of the size of <ul>.

  • I’m almost there, I think I’ve got you in the air

  • @Patrick’s look at, website the bid is the font-sizem, however I can not increase the font, I needed to increase the space between the read without breaking the menu

Show 3 more comments

2 answers

2


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

  • not yet aligned and centralized ;/

  • when the screen decreases, it breaks, it doesn’t stay in line

  • @Furlan, I’ve already edited my answer, see if that’s what you want

  • not dude, still out :( ,I’m not getting it

  • Dude, you gotta explain to yourself, stay out? what?

  • the content is configured like this: width:80%; margin:0 auto; the menu has to look the same, understand?

  • @Furlan, I’m sorry but I don’t understand. In this fiddle added Borders for better understanding: the menu stays inside the navbar, right? I don’t see what the problem is

  • got the result: website

  • I still don’t understand what you wanted but I’m glad you made it! Good @Furlan!

Show 4 more comments

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 breaking because of the image.

And try to decrease font-size using media query.

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

  • look, website the bid is the font-size, however I can not increase the font, I needed to increase the space between the read without breaking the menu

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.