Mixing
How to use a tag in more than one pages
I am using a nav tag in index page and also want to use that in second page but I want to remain just one same css file. Now the problem is that if I will change .nav styling in css file for second page then it will be change in index page.
Should I make separate css files for every page or is there any other solution as well?
I tried to give id to nav in second html page to make it different in the css file but it is not making changing in second page nav.
   
one
two
three
It should be change in the second page.
html css bootstrap-4
asked Jan 1 at 14:39
Sunny KingSunny King
1
add a comment |
I am using a nav tag in index page and also want to use that in second page but I want to remain just one same css file. Now the problem is that if I will change .nav styling in css file for second page then it will be change in index page.
Should I make separate css files for every page or is there any other solution as well?
I tried to give id to nav in second html page to make it different in the css file but it is not making changing in second page nav.
   
one
two
three
It should be change in the second page.
html css bootstrap-4
asked Jan 1 at 14:39
Sunny KingSunny King
1
add a comment |
I am using a nav tag in index page and also want to use that in second page but I want to remain just one same css file. Now the problem is that if I will change .nav styling in css file for second page then it will be change in index page.
Should I make separate css files for every page or is there any other solution as well?
I tried to give id to nav in second html page to make it different in the css file but it is not making changing in second page nav.
   
one
two
three
It should be change in the second page.
html css bootstrap-4
asked Jan 1 at 14:39
Sunny KingSunny King
1
I am using a nav tag in index page and also want to use that in second page but I want to remain just one same css file. Now the problem is that if I will change .nav styling in css file for second page then it will be change in index page.
Should I make separate css files for every page or is there any other solution as well?
I tried to give id to nav in second html page to make it different in the css file but it is not making changing in second page nav.
   
one
two
three
It should be change in the second page.
html css bootstrap-4
html css bootstrap-4
asked Jan 1 at 14:39
Sunny KingSunny King
1
asked Jan 1 at 14:39
Sunny KingSunny King
1
asked Jan 1 at 14:39
Sunny KingSunny King
1
asked Jan 1 at 14:39
Sunny KingSunny King
1
asked Jan 1 at 14:39
Sunny KingSunny King
1
1
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
add a comment |
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
add a comment |
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
answered Jan 1 at 15:36
WayneWayne
3,85311723
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/3.0/"u003ecc by-sa 3.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%2f53996347%2fhow-to-use-a-nav-tag-in-more-than-one-pages%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
add a comment |
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
add a comment |
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
You can add a class to your element and reference that particular class. For example:
<nav class="nav-style-1">...</nav>
<nav class="nav-style-2">...</nav>
.nav-style-1 { your styles ... }
.nav-style-2 { your styles ... }
Hope that helped!
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
answered Jan 1 at 14:41
webkitfanzwebkitfanz
3851322
3851322
add a comment |
add a comment |
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
add a comment |
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
add a comment |
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
My recommendation is, if you want to continue with same CSS file, you can add id property to each navbar and use id to give them specific CSS attributes.
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
answered Jan 1 at 15:16
Samed KahyaogluSamed Kahyaoglu
84
84
add a comment |
add a comment |
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
answered Jan 1 at 15:36
WayneWayne
3,85311723
add a comment |
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
answered Jan 1 at 15:36
WayneWayne
3,85311723
add a comment |
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
answered Jan 1 at 15:36
WayneWayne
3,85311723
People doing wordpress themes have the same requirement as you. Their solution is to add an id tag to the body element.
Their CSS rules look something like ...
#page1 .nav {
... your nav css rules for page 1 ...
}
#page2 .page2 {
... add a style to all items on page two with the class of page2.
}
#page3 .page3 {
... custom style that appears only on page3 ...
}
The HTML
<body id="page1">
<!-- menu -->
<ul class="menu">
<li class="homepage">
<li class="page1">
<li class="page2">
<li class="page3">
</ul>
Rule [#page1 .page1] only has an effect when .page1 is a and element in #page1 which only happens on page1. So I can highlight the menu item that corresponds to the page which is loaded.
answered Jan 1 at 15:36
WayneWayne
3,85311723
answered Jan 1 at 15:36
WayneWayne
3,85311723
answered Jan 1 at 15:36
WayneWayne
3,85311723
answered Jan 1 at 15:36
WayneWayne
3,85311723
3,85311723
add a comment |
add a comment |
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%2f53996347%2fhow-to-use-a-nav-tag-in-more-than-one-pages%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
