On android back button press navbar not refreshing active class immediatelyNavbar buttons stay pressedHow to set bootstrap navbar active class with Angular JS?Bootstrap navbar active class drupalBootstrap 3 - Navbar active classwhy bootstrap navbar doesn't set 'active' class?Navbar logout buttonHow to set Bootstrap navbar “active” class in Angular 2?“Active” class not working in Bootstrap NavbarBootstrap 4 navbar active classLogin and Sign up button again showing when page is refreshed or pressed cntrl+shift+R after “logged In” in angular and spring
A simple problem about Rule
Do ibuprofen or paracetamol cause hearing loss?
How are unbalanced coaxial cables used for broadcasting TV signals without any problems?
Are scroll bars dead in 2019?
A medieval fantasy adventurer lights a torch in a 100% pure oxygen room. What happens?
I was promised a work PC but still awaiting approval 3 months later so using my own laptop - Is it fair to ask employer for laptop insurance?
Were Roman public roads build by private companies?
Is there any way to land a rover on the Moon without using any thrusters?
Why is the Digital 0 not 0V in computer systems?
Are Democrats more likely to believe Astrology is a science?
Boat children and army crossing the river puzzle
Is a suit against a University Dorm for changing policies on a whim likely to succeed (USA)?
How do I get rid of distortion in pictures of distant objects photographed with a telephoto lens?
Why did they ever make smaller than full-frame sensors?
Where can I find vomiting people?
How to remove a secondary database from an availability group and rejoin it?
Double it your way
What was redacted in the Yellowhammer report? (Point 15)
What is this unknown executable on my boot volume? Is it Malicious?
Why is my fire extinguisher emptied after one use?
What is a realistic time needed to get a properly trained army?
What explanation do proponents of a Scotland-NI bridge give for it breaking Brexit impasse?
"Literally" Vs "In the true sense of the word"
How can I discourage sharing internal API keys within a company?
On android back button press navbar not refreshing active class immediately
Navbar buttons stay pressedHow to set bootstrap navbar active class with Angular JS?Bootstrap navbar active class drupalBootstrap 3 - Navbar active classwhy bootstrap navbar doesn't set 'active' class?Navbar logout buttonHow to set Bootstrap navbar “active” class in Angular 2?“Active” class not working in Bootstrap NavbarBootstrap 4 navbar active classLogin and Sign up button again showing when page is refreshed or pressed cntrl+shift+R after “logged In” in angular and spring
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Webapp using chrome(android) and on pressing back button(android) double items are active and click outside removes old active in navbar.
Tried to add [routerLinkActiveOptions]=" exact: true ". It does not help.
<div class="row navbar-bottom-row">
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]=" exact: true " class="col navbar-bottom-item">Home</a>
<a routerLink="/myjobs" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/confirm" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/signup" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
</div>
add a comment
|
Webapp using chrome(android) and on pressing back button(android) double items are active and click outside removes old active in navbar.
Tried to add [routerLinkActiveOptions]=" exact: true ". It does not help.
<div class="row navbar-bottom-row">
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]=" exact: true " class="col navbar-bottom-item">Home</a>
<a routerLink="/myjobs" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/confirm" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/signup" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
</div>
is this just a web app or are you packaging it in something like cordova?
– Matthew Trout
Mar 28 at 10:18
No its just webapplication. No mobile app. Using chrome in android.
– Niru
Mar 28 at 11:03
'click outside removes old active in navbar' - Are you sure that it's not just the:focusor:activestyle that is misleading you?
– Matthew Trout
Mar 28 at 11:08
:hover was the issue. But now i lost hover effect on desktop.
– Niru
Mar 28 at 11:36
add a comment
|
Webapp using chrome(android) and on pressing back button(android) double items are active and click outside removes old active in navbar.
Tried to add [routerLinkActiveOptions]=" exact: true ". It does not help.
<div class="row navbar-bottom-row">
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]=" exact: true " class="col navbar-bottom-item">Home</a>
<a routerLink="/myjobs" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/confirm" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/signup" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
</div>
Webapp using chrome(android) and on pressing back button(android) double items are active and click outside removes old active in navbar.
Tried to add [routerLinkActiveOptions]=" exact: true ". It does not help.
<div class="row navbar-bottom-row">
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]=" exact: true " class="col navbar-bottom-item">Home</a>
<a routerLink="/myjobs" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/confirm" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
<a routerLink="/signup" routerLinkActive="active" class="col navbar-bottom-item">Link</a>
</div>
edited Mar 28 at 11:07
Niru
asked Mar 28 at 10:14
NiruNiru
467 bronze badges
467 bronze badges
is this just a web app or are you packaging it in something like cordova?
– Matthew Trout
Mar 28 at 10:18
No its just webapplication. No mobile app. Using chrome in android.
– Niru
Mar 28 at 11:03
'click outside removes old active in navbar' - Are you sure that it's not just the:focusor:activestyle that is misleading you?
– Matthew Trout
Mar 28 at 11:08
:hover was the issue. But now i lost hover effect on desktop.
– Niru
Mar 28 at 11:36
add a comment
|
is this just a web app or are you packaging it in something like cordova?
– Matthew Trout
Mar 28 at 10:18
No its just webapplication. No mobile app. Using chrome in android.
– Niru
Mar 28 at 11:03
'click outside removes old active in navbar' - Are you sure that it's not just the:focusor:activestyle that is misleading you?
– Matthew Trout
Mar 28 at 11:08
:hover was the issue. But now i lost hover effect on desktop.
– Niru
Mar 28 at 11:36
is this just a web app or are you packaging it in something like cordova?
– Matthew Trout
Mar 28 at 10:18
is this just a web app or are you packaging it in something like cordova?
– Matthew Trout
Mar 28 at 10:18
No its just webapplication. No mobile app. Using chrome in android.
– Niru
Mar 28 at 11:03
No its just webapplication. No mobile app. Using chrome in android.
– Niru
Mar 28 at 11:03
'click outside removes old active in navbar' - Are you sure that it's not just the
:focus or :active style that is misleading you?– Matthew Trout
Mar 28 at 11:08
'click outside removes old active in navbar' - Are you sure that it's not just the
:focus or :active style that is misleading you?– Matthew Trout
Mar 28 at 11:08
:hover was the issue. But now i lost hover effect on desktop.
– Niru
Mar 28 at 11:36
:hover was the issue. But now i lost hover effect on desktop.
– Niru
Mar 28 at 11:36
add a comment
|
1 Answer
1
active
oldest
votes
Touch screen needs no hover, so i apply hover only to mouse devices by media query like this.
@media (pointer: fine)
.navbar-bottom-item:hover
background-color: #000;
color: #fff;
add a comment
|
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55395024%2fon-android-back-button-press-navbar-not-refreshing-active-class-immediately%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Touch screen needs no hover, so i apply hover only to mouse devices by media query like this.
@media (pointer: fine)
.navbar-bottom-item:hover
background-color: #000;
color: #fff;
add a comment
|
Touch screen needs no hover, so i apply hover only to mouse devices by media query like this.
@media (pointer: fine)
.navbar-bottom-item:hover
background-color: #000;
color: #fff;
add a comment
|
Touch screen needs no hover, so i apply hover only to mouse devices by media query like this.
@media (pointer: fine)
.navbar-bottom-item:hover
background-color: #000;
color: #fff;
Touch screen needs no hover, so i apply hover only to mouse devices by media query like this.
@media (pointer: fine)
.navbar-bottom-item:hover
background-color: #000;
color: #fff;
answered Mar 28 at 12:06
NiruNiru
467 bronze badges
467 bronze badges
add a comment
|
add a comment
|
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55395024%2fon-android-back-button-press-navbar-not-refreshing-active-class-immediately%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
is this just a web app or are you packaging it in something like cordova?
– Matthew Trout
Mar 28 at 10:18
No its just webapplication. No mobile app. Using chrome in android.
– Niru
Mar 28 at 11:03
'click outside removes old active in navbar' - Are you sure that it's not just the
:focusor:activestyle that is misleading you?– Matthew Trout
Mar 28 at 11:08
:hover was the issue. But now i lost hover effect on desktop.
– Niru
Mar 28 at 11:36