Switching of Browsers

Asked

Viewed 49 times

0

I made my site with bootstrap, and I’m having some problems, in Mozilla the site is viewed normally, already in Chrome this distorted confirm the images, Somebody’s got a tip on how to fix this??

Mozilla

Chrome

<div class="menug">
 <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#manu1">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand navbar-brand-centered" href="#"><img class="img-responsive imgLogo" src="img/logo/efloorpqn.png"></a>
  </div>
  <div class="collapse navbar-collapse navbarBorda" id="manu1">
    <div class="posicao">
    <ul class="nav navbar-nav">
      <li class="navbarBorda"><a href="#">Atendimento</a></li>
    </ul>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="navbarBorda"><a href="#entrar">Entrar</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Como Acessar</a></li>
            <li><a href="#">Ideal Para Quem</a></li>
            <li><a href="#">Funcionalidades</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Quero Conhecer</a></li>
            <li><a href="#">Contratar</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Contatos</a></li>
            <li><a href="#">Clientes</a></li>
          </ul>
      </li>
    </ul>
  </div> 
</div>


                /*navbar*/
            .navbar {
                margin-bottom: 0;
                z-index: 9999;
                border: 0;
                font-size: 16px !important;
                line-height: 1.42857143 !important;
                border-radius: 0;
                padding-top: 25px;
                padding-bottom: 25px;     
            }

            .menug .navbar-brand {
                height: 80px;
            }

            .menug .nav >li >a {
              padding-top: 2%;
              padding-bottom: 2%;
              padding-left: 20%;
              padding-right: 20%;
            }

            .menug .navbar-toggle {
              padding: 5px;
              margin: 15px 10px 15px 0;
            }

            .navbarBorda .nav >li >a {
              border-color: #FFFFFF;
              border-style: solid;
              border-width: 1px;
              background-color: #222;
              margin-left: 15px;
              margin-right: 15px;
            }


            @media (max-width: 960px) {
                .navbar {
                    margin-bottom: 0;
                    z-index: 9999;
                    border: 0;
                    font-size: 16px !important;
                    line-height: 1.42857143 !important;
                    border-radius: 0;
                    padding-top: 15px;
                    padding-bottom: 15px;     
                }
                .menug .navbar-toggle {
                  padding: 5px;
                  margin: 10px 5px 10px 0;
                }

                .navbarBorda .nav >li >a {
                  border-style: none;
                  margin-left: 15px;
                  margin-right: 15px;
                }

                .menug .navbar-brand {
                height: 60px;
                }
            }

            .navbar-brand-centered {
                position: absolute;
                left: 50%;
                display: block;
                width: 160px;
                text-align: center;
                background-color: transparent;
                padding-top: 3px;   
            }

            .navbar>.container .navbar-brand-centered, 
            .navbar>.container-fluid .navbar-brand-centered {
                margin-left: -80px;
            }
css bootstrap

  • Could provide the HTML and CSS of your Menu?

  • Provide more details to us, even better if you have something playable (Jsfiddle for example)

  • Includes HTML and CSS

  • @Carolkojima isn’t much help as it’s still totally different from the pictures. You can’t pass a better simulation than you have?

  • Simulei here https://jsfiddle.net/95vk3z9d/1/, if you increase the screen to see that the menu is not right.

1 answer

2


It is that in navbarBorda you used margin, so takes the element out of the edge. Changing this margin by padding will work, because the padding is the spacing of the edge inwards. Getting like this:

            .navbarBorda .nav >li >a {
              border-color: #FFFFFF;
              border-style: solid;
              border-width: 1px;
              background-color: #222;
              padding-left: 15px;
              padding-right: 15px;
            }

Browser other questions tagged css bootstrap

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