当我调整窗口大小时，如何在导航栏上更改li标签的值/内容？

Question

Good day Sir/Maam..

i just want to ask and get some idea from your opinion that you can give or if possible the exact code :) . im working on my first website design and i have this problem which is how to change the value or content of my navbar when i full re-sized back my window. I dont have any idea how i could solve this.. so plss need help here.. thank you!

this is the output of my sample Project

my navbar in full resized

my navbar when i resized in max-width 580px and clicked the menu bar

this is what it looks like when i full resized it again and gives me a hard time to think to turned it to normal..

sorry for my bad english.. hope to understand my problem and give some idea to solve this.. thanks a lot!

Answer 1

if you need to do as exactly a in the pictures use CSS

@media only screen and (max-width: 768px) { 

.your_class{
font-size:0px;
}
}

change width according to needs. You can also use min-width.

Answer 2

you could look for css media queries:

 @media (max-width: 600px) { li span { /* on mobile screens span will be hidden try resizing. */ display: none; } } 

 <ul> <li>icon <span>users</span></li> <li>icon <span>profile</span></li> <li>icon <span>mail</span></li> </ul>