Dropdown menu bootstrap

Asked

Viewed 228 times

0

My bootstrap dropdown menu is buggered, so if anyone can help... CSS: http://pastebin.com/FWPahxUk http://image.prntscr.com/image/5b6dc92ca1c24ded880084b3f1cd04f8.png

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                    </button>
                    <a href="index.html" class="navbar-brand"><img src="images/logo.png" class="img-responsive" alt="logo"></a>
                </div>
                <div class="collapse navbar-collapse">
<ul id="menu-header" class="nav navbar-nav navbar-right">
                        <li><a href="index.html" class="smoothScroll">PÁGINA PRINCIPAL</a></li>
<li><a href="servicos.html" data-toggle="dropdown" class="dropdown-toggle">SERVIÇOS <span class="caret"></span></a>
<ul role="menu" class="dropdown-menu">
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="manuntencao.html"><i class="fa fa-cogs" aria-hidden="true"></i>
Manuntenção de websites</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="web.html"><i class="fa fa-code" aria-hidden="true"></i>
Desenvolvimento Web</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="redessociais.html"><i class="fa fa-level-up" aria-hidden="true"></i>
&nbsp&nbspRedes Sociais</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="cursos.html"><i class="fa fa-book" aria-hidden="true"></i>
&nbspCursos</a>
    <li id="menu-item-185" class="menu-item-185 dropdown"><a style="text-align:justify;" href="seo.html"><i class="fa fa-search" aria-hidden="true"></i>
&nbsp&nbspSEO</a>
    <li id="menu-item-191" class="menu-item-191"><a style="text-align:justify;" href="suporte.html"><i class="fa fa-support" aria-hidden="true"></i>
&nbsp&nbspSuporte</a></li>
</li>
</ul>
<li><a href="contacto.html" class="smoothScroll">CONTACTO</a></li>
<li><a href="#" class="smoothScroll">ENSINO</a></li>
</li>
</ul>
</div>
    </div>
        </div>
menu dropdown bootstrap

  • Can you explain what the problem is?

  • I want the dropdown menu to be lower and not open glued to the text

  • You have many HTML tags without being closed, HTML syntax is broken.

2 answers

1

I think the problem was some opening/closing errors of some html tags:

Correction:

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand"><img src="images/logo.png" class="img-responsive" alt="logo"></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul id="menu-header" class="nav navbar-nav navbar-right">
                <li>
                    <a href="index.html" class="smoothScroll">PÁGINA PRINCIPAL</a>
                </li>
                <li>
                    <a href="servicos.html" data-toggle="dropdown" class="dropdown-toggle">SERVIÇOS <span class="caret"></span></a>
                    <ul role="menu" class="dropdown-menu">
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="manuntencao.html"><i class="fa fa-cogs" aria-hidden="true"></i> Manuntenção de websites</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="web.html"><i class="fa fa-code" aria-hidden="true"></i> Desenvolvimento Web</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="redessociais.html"><i class="fa fa-level-up" aria-hidden="true"></i>&nbsp&nbspRedes Sociais</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="cursos.html"><i class="fa fa-book" aria-hidden="true"></i> &nbspCursos</a>
                        </li>
                        <li id="menu-item-185" class="menu-item-185 dropdown">
                            <a style="text-align:justify;" href="seo.html"><i class="fa fa-search" aria-hidden="true"></i> &nbsp&nbspSEO</a>
                        </li>
                        <li id="menu-item-191" class="menu-item-191">
                            <a style="text-align:justify;" href="suporte.html"><i class="fa fa-support" aria-hidden="true"></i> &nbsp&nbspSuporte</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="contacto.html" class="smoothScroll">CONTACTO</a>
                </li>
                <li>
                    <a href="#" class="smoothScroll">ENSINO</a>
                </li>
            </ul>
        </div>
    </div>
</div>

To your bar in jsfiddle

It may also be derived from some css you are defining, however here you have the corrected html part

0

I can not comment. more I will try to help: Understand P-X as occupied space Understand M-Y as vacant space around.

<ul role="menu" class="dropdown-menu p-X m-Y">
  <li class="menu-item dropdown p-X m-Y">
    <a href="" class="p-X m-Y">
      <i class="fa fa-level-up p-X m-Y"></i>
    </a>
  <li>
</ul>

P- is the distance between stops
VALUES FOR P-X: p-0, p-1, p-2, p-3, p-4, p-5, p-6
M- IS THE DISTANCE BETWEEN MARGIN AND PARENT ELEMENT
Values for M-Y : m-auto , m-0, m-1, m-2, m-3, m-4, m-5
test the values on each item. and tell me if it worked.

Browser other questions tagged menu dropdown bootstrap

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