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