Horizontal dropdown menu

Status
Niet open voor verdere reacties.

Dirksen23

Gebruiker
Lid geworden
31 okt 2016
Berichten
19
Hi iedereen,

ik heb in bootstrap 4 een menu gemaakt alleen moet Ruimte tussen menu en vervolgkeuzemenu.
hoe moet ik Ruimte tussen menu en vervolgkeuzemenu krijgen?


html:
HTML:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
          <div class="container">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="index.html">Makanp</a>
              </div>
              <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="index.html">Home</a></li>    
                      <li><a href="about.html">About</a></li>

                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#portfolio">Portfolio</a></li>
                    
                          </ul>
                      </li>            
                      <li><a href="#contact">Contact</a></li>
                  </ul>
              </div><!--/.nav-collapse -->
          </div>
      </div>

/* Style.css */
.navbar-default {
background-color: #2C3E50;
border-color: #FFFFFF;
color: #FFFFFF;
}

.navbar-default .navbar-brand {
color: #FFFFFF;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #18BC9C;
background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #1A242F;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #f1c40f;
background-color: transparent;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #1A242F;
color: #FFFFFF;
}[/CODE]



groet
 
Je begint je verhaal met Bootstrap 4 (beta, niet in live sites gebruiken) en je geeft de code van Bootstrap 3. Welke versie gebruik je?
 
hi iedereen

Het is Bootstrap 3
alleen ik wil afstand tussen main menu en de drop-down menu en hoe kan ik de drop-down menu plaatsen?

een idee?
 
hi iedereen

Ik wil de drop-down menu 3px naar beneden komt en hoe moet ik de drop-down menu een beetje naar rechts plaatsen.
een Idee? het is bootstrap 3
 
Bedoel je dit?
Code:
@media (min-width:768px) {
    .dropdown-menu {
        top: 104% !important;
        right: -2px !important;
        left: auto !important;
    }
}
Gebruik !important zeer weinig!! Hier heb ik het gebruikt om de css klein en simpel te houden.
Eigenschap top is voor de tussenruimte en eigenschap right is voor het (beetje) naar rechts schuiven.
Suc6. Have fun.
 
ongeveer de antwoord

Hi iedereen,

Ik wilde de submenu naar beneden schuiven maar ik snap wat jij bedoeld.
Bedankt.:cool:
 
Met "top: 104% ....." schuif je het submenu naar beneden.
Met "right: -2px ....." schuif je het submenu naar rechts.
Beide waardes kan je zelf aanpassen.

De @media heb ik toegevoegd zodat dit alleen gebeurt op tablet en pc.

Als je vraag anders is dan de oplossing dan hoor ik het wel.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan