Index.ctp page display extra li Class at NavBar when view screen size is smaller

Hello World,

i got a question regarding NavBar changes if view screen is smaller.

If its at Computer Screen size, Nav Bar only shows Search
If its at Phone screen size, Nav Bar shows Search and also Classic

 <div class="example-wrap">
 <h4 class="example-title">Mega Navbar</h4>
 <div class="example">
    <div class="navbar navbar-default navbar-mega">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                    data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="hamburger-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Sample Menu</a>
            </div>
            <div class="navbar-collapse collapse" id="navbar-collapse-1">
                <ul class="nav navbar-toolbar">

                 <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Classic</a>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Action </a>
                            <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Another action 
                     </a>
                        </div>
                    </li>
                 

               
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Search</a>
                        <div class="dropdown-menu" role="menu">
                            <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Action </a>
                            <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Another action 
                     </a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
  </div>
 </div>

how to make in the html when its phone size shows Classic and Search LI Class
and when its computer screen size shows Search LI Class only? is it using IF Statement?

How to add the IF Statement into the index.ctp?

Or there’s other method to display it?

Thank you

Seems to me, that you are looking for CSS Breakpoints.
A good beginning is to read How To Specify Typical Device Breakpoints With Media Queries

hello Dirk,

thank you for your reply, i read and tested the tutorial of breakpoints, but it shows only changes of background colors as sizes changes, if i want to display different texts as sizes changes, where can i style it?

You could put your text in a div container and use css display to manage your requrements
https://www.w3schools.com/cssref/pr_class_display.asp

thanks, i tried and the content for the :before seemed is limited

my example

 <style>

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

 .transform:before {
  content : '     
   <li class="nav-item dropdown">
   <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Classic</a>
   <div class="dropdown-menu" role="menu">
   <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Action </a>
   <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Another action 
   </a>
   </div>
   </li>';

   }
   }

</style>



  <div class="example-wrap">
  <h4 class="example-title">Mega Navbar</h4>
  <div class="example">
  <div class="navbar navbar-default navbar-mega">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggler hamburger hamburger-close collapsed"
                data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="hamburger-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:void(0)">Sample Menu</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapse-1">
            <ul class="nav navbar-toolbar">

                    <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Search</a>
                    <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Action </a>
                        <a class="dropdown-item" tabindex="-1" href="javascript:void(0)"> Another action 
                 </a>
                    </div>
                </li>



         ​<div class="transform">
         </div>

            </ul>
        </div>
    </div>
    </div>
   </div>
   </div>

it does not comes out, is it because content is too long?

i will give it another try, i think i got something sparking