Περίεργο πρόβλημα με navbar bootstrap 4

[killer76]

Καλησπέρα. Έχω ψάξει πάρα πολύ αλλά δεν μπορώ να βρω τι φταίει. Έχω μια navbar στο bootstap με ένα dropdown menu. Το πρόβλημα είναι οτι όταν στο κινητό, ανοίγω το dropdown, κατεβάζει όλο το navbar και δεν ανοίγει σαν ξεχωριστό κουτάκι. Είδα και το default και εκεί το κάνει. Θυμάμαι κάπως παλιά το είχα φτιάξει, αλλά δεν μπορώ να το ξαναβρώ με τίποτα.

Δείτε εδώ τι εννοώ (έσβησα τ αινκ 1 και 2 για να μην μας μπερδευουν)...

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_dropdown&stacked=h

Στο desktop

Responsive

 

Θέλω το κουτάκι με τα link 1, 2, 3 να βγαίνει εκτός της μαυρης μπάρας (όπως στο desktop) και η μπάρα να μένει ανέπαφη. 

[XPHSTOS_]

Αν δεν μας δώσεις και τον κώδικα που έχεις γράψει δεν μπορούμε να βοηθήσουμε και πολύ.
Ιδανικά να μας το έδινες σε codepen ή jsfiddle για να μπορούμε να το δούμε στην πράξη και πως δουλεύει.

[Ren_Hoek]

Ένα κακό που έχουν τα frameworks τύπου bootstrap είναι πως σε περιορίζουν λίγο ως προς την ελευθερία να φτιάξεις κάτι διαφορετικό. Πρέπει να ακολουθείς το documentation και αν θες να προσθέσεις κάτι να σιγουρευτείς οτι δεν δημιουργείται κάποιο conflict με τα classes του framework. Στο link που έδωσες, φαντάζομαι είναι το πρόβλημα που υπάρχει. Αντικατέστησε το nav element σου με το παρακάτω:

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Παρατήρησε πως όταν αλλάζει το view-width γύρω στα 992px όλα τα links κρύβονται πίσω από έναν togglable button και μέσα εκεί βρίσκεται και το dropdown link σου. Γενικότερα είναι καλή πρακτική αυτός ο τρόπος εμφάνισης του menu, γιατί έτσι έχεις περισσότερο χώρο εμφάνισης του περιεχομένου σου + ότι όλοι οι χρήστες είναι εξοικειωμένοι πως πίσω από ένα τέτοιο button βρίσκεται το menu. Το view-width αν το θεωρείς μεγάλο το αλλάζεις εσύ με ένα media query, αλλά αυτό είναι που προτείνει το bootstrap. Μπορείς να δεις το documentation για το παραπάνω εδώ:

https://getbootstrap.com/docs/4.6/components/navbar/

[killer76]

Στις 28/5/2023 στις 10:46 ΜΜ, XPHSTOS_ είπε

Αν δεν μας δώσεις και τον κώδικα που έχεις γράψει δεν μπορούμε να βοηθήσουμε και πολύ.
Ιδανικά να μας το έδινες σε codepen ή jsfiddle για να μπορούμε να το δούμε στην πράξη και πως δουλεύει.

Καλημέρα. Αυτός είναι ο κώδικάς μου.

https://jsfiddle.net/4vtark90/

Παρατήρησε όταν ανοίγει το μενού στο responsive, πως γίνεται όλο το header.

[tliako]

3 ώρες πριν, killer76 είπε

Καλημέρα. Αυτός είναι ο κώδικάς μου.

https://jsfiddle.net/4vtark90/

Παρατήρησε όταν ανοίγει το μενού στο responsive, πως γίνεται όλο το header.

άλλαξε τη γραμμή 

<nav class="navbar navbar-expand-sm bg-light navbar-light justify-content-end fixed-top">

σε

 <nav class="navbar navbar-expand bg-light navbar-light justify-content-end fixed-top">

για να έχεις μόνιμα σε desktop mode τη navbar αν αυτό είναι που θές (δεν θα είναι responsive) . 

[killer76]

22 ώρες πριν, tliako είπε

άλλαξε τη γραμμή 

<nav class="navbar navbar-expand-sm bg-light navbar-light justify-content-end fixed-top">

σε

 <nav class="navbar navbar-expand bg-light navbar-light justify-content-end fixed-top">

για να έχεις μόνιμα σε desktop mode τη navbar αν αυτό είναι που θές (δεν θα είναι responsive) . 

Ευχαριστώ πολύ. Έτσι το ήθελα!!!

Edit: Δήλωσα ως λύση το δικό μου ποστ αντί για του @tliako. Πως μπορώ να το αλλάξω?