Προς το περιεχόμενο

Πρόβλημα με collapse menu. Any ideas?

AndreasV.

Από τον AndreasV.
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

AndreasV. Contributor

AndreasV.

Δημοσ.
Δημοσ. (επεξεργασμένο)

Έχω ένα navbar το οποίο όταν η οθόνη μικραίνει γίνεται collapse. Το πρόβλημα είναι πως τα links του navbar εμφανίζονται πάνω από το κείμενο του εκάστοτε section. Στο τέλος του post υπάρχει screenshot ώστε να καταλάβετε τι εννοώ. Thanks :) 


  

<! -- HTML -->

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
        <!-- Δημιουργία του icon όταν μικραίνει η οθόνη-3 span classes γιατί θέλω τις τρεις γραμμούλες -->
     
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">          
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        
        </button>

        
    </div>
      <!-- Δημιουργία του menu -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
          <li class="active"><a href="home.html"><i class="fa fa-home color-home"></i></a></li>
          
        <li><a href="about.html">About</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.php">Contact</a></li>
        
      
        <!-- Social Buttons -->
        <li><a href="https://github.com/AndreasVasd" target="_blank" id="tooltip1" data-toggle="tooltip" title="Github"><i class="fa fa-github color-github"></i></a></li>
        <li><a href="https://www.linkedin.com/in/andreas-vasdekis" target="_blank" id="tooltip2" data-toggle="tooltip" title="LinkedIn"><i class="fa fa-linkedin color-linkedin"></i></a></li>
        <li><a href="https://www.twitter.com" target="_blank" id="tooltip3" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter color-twitter"></i></a></li>
        </ul>
        
        
        <!-- Το custom search bar που τοποθετήσαμε -->

      <ul class="nav navbar-nav navbar-right">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
        
      </ul>
      </div>
        
        </div>
        </nav>



/* CSS */

.navbar {
      margin-bottom: 0;
      border-radius: 0;
      font-size: 17px;
      font-family: 'Open Sans';
      background-color: #282828;
}

/*Ρυθμίσεις για τα link του menu*/

.navbar a{
    border-bottom: 2px solid transparent;/*η γραμμούλα κάτω από τα links */
    height: 48px; /* το ύψος των links...για να μη χαλάει το hover στο resizing */
}

.navbar a:hover{
    border-bottom: 2px solid #00539f;
}

.navbar a.active{
    border-bottom: 2px solid #00539f;
}

/*Ρυθμίσεις για το search button*/

.navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

/*Ρυθμίσεις για το εικονίδιο του search button*/

.navbar button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;/*για να γίνεται χεράκι με το hover*/
   
}

.navbar button:hover {
  background: #ccc;
}


/*Ρυθμίσεις για τα social buttons*/

.color-github{
    color:#00aced;
    padding: 2% 4% 2% 4%;
}
.color-linkedin{
    color:#0176b5;
    padding: 2% 4% 2% 4%;
}
.color-twitter{
    color:#00539f;
    padding: 2% 4% 2% 4%;
}

/* Τα tooltips για τα social buttons */
#tooltip1{
    color: white;
}

#tooltip1:hover{
    text-decoration: none;
}

#tooltip2{
    color: white;
}

#tooltip2:hover{
    text-decoration: none;
}

#tooltip3{
    color: white;
}

#tooltip3:hover{
    text-decoration: none;
}

 

PrtScr capture.jpg

PrtScr capture_2.jpg

Επεξ/σία από AndreasV.
Predatorkill Grand Master

Predatorkill

Δημοσ.
Δημοσ. (επεξεργασμένο)

1) Ή βαλε τον κωδικα σε code tags εδω στο φορουμ ή ανεβασε το στο codepen για να ειναι πιο ευαναγνωστος.

2) Εξηγησε το προβλημα σου, με ξερο κωδικα περιμενεις να σου κανει καποιος debug με μια φωτογραφια;

3) Εχεις συμπεριλαβει τα js αρχεια της bootstrap και της jquery στην html; (Δεν εχω διαβασει τον κωδικα σου)

4) Τα comments καλο θα ηταν να ειναι στα Αγγλικα, οχι οτι τρεχει τιποτα απλα ετσι συνηθιζεται.

Επεξ/σία από Predatorkill
AndreasV. Contributor

AndreasV.

Δημοσ.
  • Μέλος
Δημοσ.
7 λεπτά πριν, Predatorkill είπε

1) Ή βαλε τον κωδικα σε code tags εδω στο φορουμ ή ανεβασε το στο codepen για να ειναι πιο ευαναγνωστος.

2) Εξηγησε το προβλημα σου, με ξερο κωδικα περιμενεις να σου κανει καποιος debug με μια φωτογραφια;

3) Εχεις συμπεριλαβει τα js αρχεια της bootstrap και της jquery στην html; (Δεν εχω διαβασει τον κωδικα σου)

4) Τα comments καλο θα ηταν να ειναι στα Αγγλικα, οχι οτι τρεχει τιποτα απλα ετσι συνηθιζεται.

Καλησπέρα! Ναι έχω συμπεριλάβει τα αρχεία js, bootsrap, jquery. Τα σχόλια θα αλλαχτούν(απλά έγινε για δική μου ευκολία)! Sorry που "πέταξα" έτσι χύμα τον κώδικα. Έχεις δίκιο..απλά δεν αφορά και καμιά σπουδαία λειτουργία(απλός είναι) οπότε δε σκέφτηκα την περαιτέρω μορφοποίηση που προτείνεις. Thanks anyway!

Predatorkill Grand Master

Predatorkill

Δημοσ.
Δημοσ. (επεξεργασμένο)

Η κονσολα σου πεταει js errors; Τα εχεις βαλει με τη σωστη σειρα; Πρωτα η jquery μετα το bootstrap.

Οσο απλος και να ειναι ο κωδικας διευκολυνει τους παντες να τον διαβασουν ανετα βαζοντας τον σε code tags

Αν εισαι σε bootstrap 4 τοτε χρειαζεται και το popper.js

Επεξ/σία από Predatorkill
Predatorkill Grand Master

Predatorkill

Δημοσ.
Δημοσ. (επεξεργασμένο)

Δοκιμασε σε ολα τα li να βαλεις class list-group-item και στο ul βαλε class list-group

Δοκιμασε να βαλεις αυτο οπως ειναι και πες μας αν σπαει ή αν δουλευει: 

>
	<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button"class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand"href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse"id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><ahref="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><spanclass="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><spanclass="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

 

Επεξ/σία από Predatorkill
AndreasV. Contributor

AndreasV.

Δημοσ.
  • Μέλος
Δημοσ.
14 λεπτά πριν, Predatorkill είπε

Δοκιμασε σε ολα τα li να βαλεις class list-group-item και στο ul βαλε class list-group

Δοκιμασε να βαλεις αυτο οπως ειναι και πες μας αν σπαει ή αν δουλευει: 


>
	<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button"class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand"href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse"id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><ahref="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><spanclass="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><spanclass="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Δουλεύει κανονικά αυτό!

Predatorkill...άκυρο...σπάει πάλι(το δοκίμασα μεμονωμένα πριν γι αυτό και δούλεψε - όταν το ενσωμάτωσα στον δικό μου κώδικά συνέβη το ίδιο)

AndreasV. Contributor

AndreasV.

Δημοσ.
  • Μέλος
Δημοσ.

@Predatorkill τώρα που το ενσωμάτωσα στον κώδικά μου πάλι δε λειτουργεί. Όντως πριν έτρεχε αλλά εικάζω πως το πρόβλημα δημιουργείται όταν έχω κι άλλο περιεχόμενο σε επιπλέον sections μέσα στη σελίδα(μιας και όταν έχω μόνο το navbar και τίποτε από κάτω όλα παίζουν κανονικά).

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...