Bootstrap navbar li οχι clickable η active?

[Ruhl]

Καλησπερα
Tο θεμα μου ειναι το εξης , το default του bootstrap navbar τα li και με links/anchor links μεσα οταν τα πατας φενεται να περνει καποια κατασταση "πατημενη" να την πω γιατι ονομασια οσο εψαξα(google kai element inspector) δεν βρηκα η δεν καταλαβα καλα.
Υπαρχει καποιος τροπος να ειναι απλο link χωρις να παρει αυτην την "πατημενη" κατασταση οταν το παταει ο χρηστης.

 

 Γενικα ειναι one page layout με nav li anchor links στα section(οχι μεσα sto code pen αλλα γενικα το project) για αυτο φενεται αυτη η κατασταση επειδη δεν αλαζει σελιδα και πρεπει ο χρηστης να ξαναπατησει κλικ καπου εξω για να φυγει αυτη η κατασταση και το βρησκω ενοχλητικο.
https://codepen.io/ruhl/pen/VzGoMq

Προσπαθησα να το μασκαρω μπακαλιστικα με χρωμα βαζοντας εξτρα (το default του ασπρο ειναι)

.navbar-default .navbar-nav > li > a:focus{

  color:white;

}

Αλλα οταν ξανακανεις hover στην "πατημενη" κατασταση δεν το πιανει και δεν ξερω πως το λενε για να το στοχευσω στo css να περνει αλλο χρωμα στο Hover αν δεν εχει καποια ποιο καλη λυση.

[egoeimai1]

.navbar-default .navbar-nav > li > a:hover, 

.navbar-default .navbar-nav > li > a:focus {

  color: #ff0084;

  -webkit-box-shadow: inset 0px -6px 0px #ff0084;

  box-shadow: inset 0px -6px 0px #ff0084; 

  width: 88.5%;

  -webkit-transition: 1.5s;

  -o-transition: 1.5s;

  transition: 1.5s;    

}

[Ruhl]

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
  color: #ff0084;
  -webkit-box-shadow: inset 0px -6px 0px #ff0084;
  box-shadow: inset 0px -6px 0px #ff0084; 
  width: 88.5%;
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;    
}

Μαλον δεν καταλαβες τι θελω να μην γινεται ,δεν το εξηγησα καλα .

 

Ετσι ειχα το αρχικο κωδικα οπως τον εκανες στην διορθωση πριν παρατηρησω οτι δεχεται μια "πατημενη κατασταση" δες την εικονα πατησα τις υπηρεσιες(οταν το παταει ο χρηστης θα τον πηγαινει 3 section ποιο κατω) και χωρις να πατησω ξανα κλικ καπου, αφηνω hover στην επικοινωνια(ζωγραφισα ενα υποθετικο cursor γιατι το print screen dn to pernei).

Αυτη την πατημενη κατασταση δεν θελω να την δεχεται  γιατι παραμενουν οι μορφοποιησεις και φευγουν μονο οταν ο χρηστης πατησει ξανα κλικ καπου.

 

[angmar]

Τσέκαρε αν έχει styles για :visited anchors https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

[Ruhl]

Τσέκαρε αν έχει styles για :visited anchors https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:visited{

 

 Το εβαλα μαζι με το style που θελω μπας και παρει μπρος αλλα δεν γινεται, ειναι αλλη μορφοποιηση αυτη , και κλασικα παλι στο hover του "πατημενου state" δεν περνει το hover χρωμα η γραμματοσειρα.

 

Ουτε το a:link η a:active ειναι

[Left13S]

.dropdown:hover .dropdown-menu {
display: block;
}

Για δες αν σε βοηθαει αυτο

[defacer]

1. Ανοίγεις Chrome. Κάνεις δεξί κλικ inspect σε κάποιο από τα nav items.
 
2. Εφόσον είναι κάτι "παροδικό" αυτό που συμβαίνει, έχοντας το Styles panel ανοιχτό στα δεξιά, κάνεις κλικ εκεί που λέει από κάτω (στα Filter), ":hov". Ανοίγει το πανελάκι με τις 4 "καταστάσεις" που μπορεί να έχουν αυτά τα anchors.
 
3. Κλικ κλικ κλικ ανοιγοκλείνεις και τις 4 και αμέσως βλέπεις ότι το :focus είναι αυτό που κάνει τη δουλειά. Πράγματι, τώρα μπορείς να το επιβεβαιώσεις απλώς πατώντας μερικά tab για να πάει το keyboard focus πάνω σε ένα από τα anchors.
 
4. Ανοιγοκλείνοντας το :focus πάνω στο anchor, βλέπεις αμέσως από κάτω στα styles πως όταν είναι ανοιχτό εφαρμόζει το παρακάτω από το bootstrap:

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

οπότε τώρα ξέρεις το μισό της λύσης.

 

5. Με κλειστό το :focus, πας στο δεύτερο tab δίπλα στα Styles ("Computed"), και κάνεις κλικ στο βελάκι δίπλα στο color (τρίτο στη λίστα) γιατί αυτό είναι που θες να διατηρήσεις όπως είναι προφανές από το παραπάνω rule. Βλέπεις ότι το έχει άσπρο και αυτό προκύπτει από το δικό σου rule που λέει

.navbar-default .navbar-nav>li>a {
    color: white;
    font-weight: bold; 
}

Αυτό το rule έχει μικρότερο specificity από του bootstrap επειδή σου λείπει ο pseudo-class selector (:focus) που έχει το bootstrap.

 

6. Άρα, η λύση είναι να αλλάξεις το δικό σου rule σε

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus
{
    color: white;
    font-weight: bold; 
}

και problem solved. Εναλλακτικά μπορείς απλά να καπελώσεις το rule του bootstrap ανεβάζοντας specificity στο δικό σου, π.χ. βάζοντας παραπάνω classes:

.navbar.navbar-default.navbar-fixed-top .navbar-nav>li>a
{
    color: white;
    font-weight: bold; 
}

edit:

7. Μόλις πρόσεξα ότι αυτό που έκανες αρχικά ήταν σχεδόν το ίδιο πράγμα, αλλά όχι ακριβώς. Το λάθος εκεί είναι πως έβαλες το :focus rule για άσπρο μετά το :hover rule, και εφόσον έχουν το ίδιο specificity κερδίζει ο εμφανιζόμενος τελευταίος (και άρα, κάτι που είναι :focus:hover θα παραμείνει άσπρο).

[Ruhl]

1. Ανοίγεις Chrome. Κάνεις δεξί κλικ inspect σε κάποιο από τα nav items.

 

2. Εφόσον είναι κάτι "παροδικό" αυτό που συμβαίνει, έχοντας το Styles panel ανοιχτό στα δεξιά, κάνεις κλικ εκεί που λέει από κάτω (στα Filter), ":hov". Ανοίγει το πανελάκι με τις 4 "καταστάσεις" που μπορεί να έχουν αυτά τα anchors.

 

3. Κλικ κλικ κλικ ανοιγοκλείνεις και τις 4 και αμέσως βλέπεις ότι το :focus είναι αυτό που κάνει τη δουλειά. Πράγματι, τώρα μπορείς να το επιβεβαιώσεις απλώς πατώντας μερικά tab για να πάει το keyboard focus πάνω σε ένα από τα anchors.

 

4. Ανοιγοκλείνοντας το :focus πάνω στο anchor, βλέπεις αμέσως από κάτω στα styles πως όταν είναι ανοιχτό εφαρμόζει το παρακάτω από το bootstrap:

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

οπότε τώρα ξέρεις το μισό της λύσης.

 

5. Με κλειστό το :focus, πας στο δεύτερο tab δίπλα στα Styles ("Computed"), και κάνεις κλικ στο βελάκι δίπλα στο color (τρίτο στη λίστα) γιατί αυτό είναι που θες να διατηρήσεις όπως είναι προφανές από το παραπάνω rule. Βλέπεις ότι το έχει άσπρο και αυτό προκύπτει από το δικό σου rule που λέει

.navbar-default .navbar-nav>li>a {
    color: white;
    font-weight: bold; 
}

Αυτό το rule έχει μικρότερο specificity από του bootstrap επειδή σου λείπει ο pseudo-class selector (:focus) που έχει το bootstrap.

 

6. Άρα, η λύση είναι να αλλάξεις το δικό σου rule σε

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus
{
    color: white;
    font-weight: bold; 
}

και problem solved. Εναλλακτικά μπορείς απλά να καπελώσεις το rule του bootstrap ανεβάζοντας specificity στο δικό σου, π.χ. βάζοντας παραπάνω classes:

.navbar.navbar-default.navbar-fixed-top .navbar-nav>li>a
{
    color: white;
    font-weight: bold; 
}

edit:

7. Μόλις πρόσεξα ότι αυτό που έκανες αρχικά ήταν σχεδόν το ίδιο πράγμα, αλλά όχι ακριβώς. Το λάθος εκεί είναι πως έβαλες το :focus rule για άσπρο μετά το :hover rule, και εφόσον έχουν το ίδιο specificity κερδίζει ο εμφανιζόμενος τελευταίος (και άρα, κάτι που είναι :focus:hover θα παραμείνει άσπρο).

Ευχαριστω παρα πολυ defacer πολυ επιμορφωτικο το ποστ σου εμαθα κατι και σημερα.

 

Στην σειρα τοποθετησης στο css ειχα κανει μλκια γιατι το underline του hover περνουσε , απλα δεν εχω τοσο βαθεια γνωση και νομιζα βαλαν τιποτα περιεργο στα default του bootstrap.

 

 

Original εκδοση

 

.navbar-default .navbar-nav>li>a {

    color: white;

    font-weight: bold; 

}

 

/*-----Nav Hover underline -----*/

.navbar-default .navbar-nav > li > a:hover{

  color: #ff0084;

  -webkit-box-shadow: inset 0px -6px 0px #ff0084;

  box-shadow: inset 0px -6px 0px #ff0084; 

  width: 88.5%;

  -webkit-transition: 1.5s;

  -o-transition: 1.5s;

  transition: 1.5s;    

}

 

.navbar-default .navbar-nav > li > a:focus{

  color:white;

}

Εκδοση  defacer

 

.navbar-default .navbar-nav>li>a,

.navbar-default .navbar-nav>li>a:focus

{

    color: white;

    font-weight: bold; 

}

 

/*-----Nav Hover underline -----*/

.navbar-default .navbar-nav > li > a:hover {

  color: #ff0084;

  -webkit-box-shadow: inset 0px -6px 0px #ff0084;

  box-shadow: inset 0px -6px 0px #ff0084; 

  width: 88.5%;

  -webkit-transition: 1.5s;

  -o-transition: 1.5s;

  transition: 1.5s;    

}

 

Διορθωσα και το code pen παιδια ,οποιος θελει να το χρησημοποιησει δουλευει κανονικα τωρα.