Removing certain list element on resize (desktop to mobile view)
0
Is it possible to remove a few list elements when the site is resized to mobile view?
I have a horizontal menu in the navigation bar. Say, something like
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
On screen size above 768 pixels let the complete menu display as it is but once the size gets below 768 pixels I would want it not to show links 3 and 4.
In the css I tried
m-re { display: none; }
and added the class to the < li > element
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class = "m-re"><a href="#">3</a></li>
<li class = "m-re"><a href="#">4</a></li>
</ul>
Did not work.
html css html5 responsive-design media-queries
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
asked Nov 15 '18 at 16:38
ManishManish
688
add a comment |
0
Is it possible to remove a few list elements when the site is resized to mobile view?
I have a horizontal menu in the navigation bar. Say, something like
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
On screen size above 768 pixels let the complete menu display as it is but once the size gets below 768 pixels I would want it not to show links 3 and 4.
In the css I tried
m-re { display: none; }
and added the class to the < li > element
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class = "m-re"><a href="#">3</a></li>
<li class = "m-re"><a href="#">4</a></li>
</ul>
Did not work.
html css html5 responsive-design media-queries
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
asked Nov 15 '18 at 16:38
ManishManish
688
Can you demonstrate it not working ---because it should, assuming you are using media queries?
– Paulie_D
Nov 15 '18 at 16:41
No, its not working. I tried. On resize it shows all 4.
– Manish
Nov 15 '18 at 16:44
Okay, sorry ... now it works. I feel dumb.
– Manish
Nov 15 '18 at 16:45
add a comment |
0
0
0
Is it possible to remove a few list elements when the site is resized to mobile view?
I have a horizontal menu in the navigation bar. Say, something like
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
On screen size above 768 pixels let the complete menu display as it is but once the size gets below 768 pixels I would want it not to show links 3 and 4.
In the css I tried
m-re { display: none; }
and added the class to the < li > element
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class = "m-re"><a href="#">3</a></li>
<li class = "m-re"><a href="#">4</a></li>
</ul>
Did not work.
html css html5 responsive-design media-queries
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
asked Nov 15 '18 at 16:38
ManishManish
688
Is it possible to remove a few list elements when the site is resized to mobile view?
I have a horizontal menu in the navigation bar. Say, something like
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
On screen size above 768 pixels let the complete menu display as it is but once the size gets below 768 pixels I would want it not to show links 3 and 4.
In the css I tried
m-re { display: none; }
and added the class to the < li > element
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class = "m-re"><a href="#">3</a></li>
<li class = "m-re"><a href="#">4</a></li>
</ul>
Did not work.
html css html5 responsive-design media-queries
html css html5 responsive-design media-queries
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
asked Nov 15 '18 at 16:38
ManishManish
688
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
asked Nov 15 '18 at 16:38
ManishManish
688
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
edited Nov 15 '18 at 18:48
marcelo2605
1,538830
1,538830
asked Nov 15 '18 at 16:38
ManishManish
688
asked Nov 15 '18 at 16:38
ManishManish
688
asked Nov 15 '18 at 16:38
ManishManish
688
688
Can you demonstrate it not working ---because it should, assuming you are using media queries?
– Paulie_D
Nov 15 '18 at 16:41
No, its not working. I tried. On resize it shows all 4.
– Manish
Nov 15 '18 at 16:44
Okay, sorry ... now it works. I feel dumb.
– Manish
Nov 15 '18 at 16:45
add a comment |
Can you demonstrate it not working ---because it should, assuming you are using media queries?
– Paulie_D
Nov 15 '18 at 16:41
No, its not working. I tried. On resize it shows all 4.
– Manish
Nov 15 '18 at 16:44
Okay, sorry ... now it works. I feel dumb.
– Manish
Nov 15 '18 at 16:45
Can you demonstrate it not working ---because it should, assuming you are using media queries?
– Paulie_D
Nov 15 '18 at 16:41
Can you demonstrate it not working ---because it should, assuming you are using media queries?
– Paulie_D
Nov 15 '18 at 16:41
No, its not working. I tried. On resize it shows all 4.
– Manish
Nov 15 '18 at 16:44
No, its not working. I tried. On resize it shows all 4.
– Manish
Nov 15 '18 at 16:44
Okay, sorry ... now it works. I feel dumb.
– Manish
Nov 15 '18 at 16:45
Okay, sorry ... now it works. I feel dumb.
– Manish
Nov 15 '18 at 16:45
add a comment |
3 Answers
3
active
oldest
votes
2
You can do it without using classes if you want, try this
li:nth-child(3), li:nth-child(4){
display: none;
}
And then set a media query, for larger screens
@media only screen and (min-width: 768px){
li:nth-child(3), li:nth-child(4){
display: block;
}
}
Here you have a codepen!
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
Thank you Martin. I tried this for the past half an hour and it did not work ... after I ask for help on SO and then refresh my page ... it started working. Can, you please see David's answer and let me know which one is the better way of doing it ...
– Manish
Nov 15 '18 at 16:50
That depends, it's another way to do it, you have the option to not use classes, but if you want to do it will be ok too, another difference, I made this using mobile-first, that means, first you should make it work for mobile, and the for larger screens, here you have a good article about mobile first, getflywheel.com/layout/… , you can see the difference in the media query, he set a max-width, I set a min-width, it's up to you really.
– MartinBA
Nov 15 '18 at 16:55
Thank you David, I up voted you. Both work great.
– Manish
Nov 15 '18 at 16:58
add a comment |
2
yes, exists the media-queries
this is the documentation https://www.w3schools.com/css/css3_mediaqueries_ex.asp
However you can do
@media screen and (max-width: 768px) {
.m-re{
display:none
}
}
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
Great, now it works.
– Manish
Nov 15 '18 at 16:45
add a comment |
-2
Media queries would be helpful you could read about them over here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Nov 15 '18 at 16:40
user9161658user9161658
93
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
});
}
});
draft saved
draft discarded
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%2f53324038%2fremoving-certain-list-element-on-resize-desktop-to-mobile-view%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
2
You can do it without using classes if you want, try this
li:nth-child(3), li:nth-child(4){
display: none;
}
And then set a media query, for larger screens
@media only screen and (min-width: 768px){
li:nth-child(3), li:nth-child(4){
display: block;
}
}
Here you have a codepen!
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
Thank you Martin. I tried this for the past half an hour and it did not work ... after I ask for help on SO and then refresh my page ... it started working. Can, you please see David's answer and let me know which one is the better way of doing it ...
– Manish
Nov 15 '18 at 16:50
That depends, it's another way to do it, you have the option to not use classes, but if you want to do it will be ok too, another difference, I made this using mobile-first, that means, first you should make it work for mobile, and the for larger screens, here you have a good article about mobile first, getflywheel.com/layout/… , you can see the difference in the media query, he set a max-width, I set a min-width, it's up to you really.
– MartinBA
Nov 15 '18 at 16:55
Thank you David, I up voted you. Both work great.
– Manish
Nov 15 '18 at 16:58
add a comment |
2
You can do it without using classes if you want, try this
li:nth-child(3), li:nth-child(4){
display: none;
}
And then set a media query, for larger screens
@media only screen and (min-width: 768px){
li:nth-child(3), li:nth-child(4){
display: block;
}
}
Here you have a codepen!
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
Thank you Martin. I tried this for the past half an hour and it did not work ... after I ask for help on SO and then refresh my page ... it started working. Can, you please see David's answer and let me know which one is the better way of doing it ...
– Manish
Nov 15 '18 at 16:50
That depends, it's another way to do it, you have the option to not use classes, but if you want to do it will be ok too, another difference, I made this using mobile-first, that means, first you should make it work for mobile, and the for larger screens, here you have a good article about mobile first, getflywheel.com/layout/… , you can see the difference in the media query, he set a max-width, I set a min-width, it's up to you really.
– MartinBA
Nov 15 '18 at 16:55
Thank you David, I up voted you. Both work great.
– Manish
Nov 15 '18 at 16:58
add a comment |
2
2
2
You can do it without using classes if you want, try this
li:nth-child(3), li:nth-child(4){
display: none;
}
And then set a media query, for larger screens
@media only screen and (min-width: 768px){
li:nth-child(3), li:nth-child(4){
display: block;
}
}
Here you have a codepen!
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
You can do it without using classes if you want, try this
li:nth-child(3), li:nth-child(4){
display: none;
}
And then set a media query, for larger screens
@media only screen and (min-width: 768px){
li:nth-child(3), li:nth-child(4){
display: block;
}
}
Here you have a codepen!
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
answered Nov 15 '18 at 16:45
MartinBAMartinBA
7161213
7161213
Thank you Martin. I tried this for the past half an hour and it did not work ... after I ask for help on SO and then refresh my page ... it started working. Can, you please see David's answer and let me know which one is the better way of doing it ...
– Manish
Nov 15 '18 at 16:50
That depends, it's another way to do it, you have the option to not use classes, but if you want to do it will be ok too, another difference, I made this using mobile-first, that means, first you should make it work for mobile, and the for larger screens, here you have a good article about mobile first, getflywheel.com/layout/… , you can see the difference in the media query, he set a max-width, I set a min-width, it's up to you really.
– MartinBA
Nov 15 '18 at 16:55
Thank you David, I up voted you. Both work great.
– Manish
Nov 15 '18 at 16:58
add a comment |
Thank you Martin. I tried this for the past half an hour and it did not work ... after I ask for help on SO and then refresh my page ... it started working. Can, you please see David's answer and let me know which one is the better way of doing it ...
– Manish
Nov 15 '18 at 16:50
That depends, it's another way to do it, you have the option to not use classes, but if you want to do it will be ok too, another difference, I made this using mobile-first, that means, first you should make it work for mobile, and the for larger screens, here you have a good article about mobile first, getflywheel.com/layout/… , you can see the difference in the media query, he set a max-width, I set a min-width, it's up to you really.
– MartinBA
Nov 15 '18 at 16:55
Thank you David, I up voted you. Both work great.
– Manish
Nov 15 '18 at 16:58
Thank you Martin. I tried this for the past half an hour and it did not work ... after I ask for help on SO and then refresh my page ... it started working. Can, you please see David's answer and let me know which one is the better way of doing it ...
– Manish
Nov 15 '18 at 16:50
Thank you Martin. I tried this for the past half an hour and it did not work ... after I ask for help on SO and then refresh my page ... it started working. Can, you please see David's answer and let me know which one is the better way of doing it ...
– Manish
Nov 15 '18 at 16:50
That depends, it's another way to do it, you have the option to not use classes, but if you want to do it will be ok too, another difference, I made this using mobile-first, that means, first you should make it work for mobile, and the for larger screens, here you have a good article about mobile first, getflywheel.com/layout/… , you can see the difference in the media query, he set a max-width, I set a min-width, it's up to you really.
– MartinBA
Nov 15 '18 at 16:55
That depends, it's another way to do it, you have the option to not use classes, but if you want to do it will be ok too, another difference, I made this using mobile-first, that means, first you should make it work for mobile, and the for larger screens, here you have a good article about mobile first, getflywheel.com/layout/… , you can see the difference in the media query, he set a max-width, I set a min-width, it's up to you really.
– MartinBA
Nov 15 '18 at 16:55
Thank you David, I up voted you. Both work great.
– Manish
Nov 15 '18 at 16:58
Thank you David, I up voted you. Both work great.
– Manish
Nov 15 '18 at 16:58
add a comment |
2
yes, exists the media-queries
this is the documentation https://www.w3schools.com/css/css3_mediaqueries_ex.asp
However you can do
@media screen and (max-width: 768px) {
.m-re{
display:none
}
}
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
Great, now it works.
– Manish
Nov 15 '18 at 16:45
add a comment |
2
yes, exists the media-queries
this is the documentation https://www.w3schools.com/css/css3_mediaqueries_ex.asp
However you can do
@media screen and (max-width: 768px) {
.m-re{
display:none
}
}
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
Great, now it works.
– Manish
Nov 15 '18 at 16:45
add a comment |
2
2
2
yes, exists the media-queries
this is the documentation https://www.w3schools.com/css/css3_mediaqueries_ex.asp
However you can do
@media screen and (max-width: 768px) {
.m-re{
display:none
}
}
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
yes, exists the media-queries
this is the documentation https://www.w3schools.com/css/css3_mediaqueries_ex.asp
However you can do
@media screen and (max-width: 768px) {
.m-re{
display:none
}
}
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
answered Nov 15 '18 at 16:41
David MarabottiniDavid Marabottini
1707
1707
Great, now it works.
– Manish
Nov 15 '18 at 16:45
add a comment |
Great, now it works.
– Manish
Nov 15 '18 at 16:45
Great, now it works.
– Manish
Nov 15 '18 at 16:45
Great, now it works.
– Manish
Nov 15 '18 at 16:45
add a comment |
-2
Media queries would be helpful you could read about them over here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Nov 15 '18 at 16:40
user9161658user9161658
93
add a comment |
-2
Media queries would be helpful you could read about them over here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Nov 15 '18 at 16:40
user9161658user9161658
93
add a comment |
-2
-2
-2
Media queries would be helpful you could read about them over here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Nov 15 '18 at 16:40
user9161658user9161658
93
Media queries would be helpful you could read about them over here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
answered Nov 15 '18 at 16:40
user9161658user9161658
93
answered Nov 15 '18 at 16:40
user9161658user9161658
93
answered Nov 15 '18 at 16:40
user9161658user9161658
93
answered Nov 15 '18 at 16:40
user9161658user9161658
93
93
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53324038%2fremoving-certain-list-element-on-resize-desktop-to-mobile-view%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
Can you demonstrate it not working ---because it should, assuming you are using media queries?
– Paulie_D
Nov 15 '18 at 16:41
No, its not working. I tried. On resize it shows all 4.
– Manish
Nov 15 '18 at 16:44
Okay, sorry ... now it works. I feel dumb.
– Manish
Nov 15 '18 at 16:45