There will be a significant amount of typing required for this task.
I have a page that needs some design adjustments when the screen size is reduced. This includes elements of menus switching positions and additional design features on certain fields.
Currently, I am following Bootstrap 4 documentation closely on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)
Providing an example of one of the menus:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Navigation Menu</title>
<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"><\/script>')</script>
<script src="Libs/Popper/popper.min.js"></script>
<script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">
<link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">
<a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">
<!-- Carousel -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse main-navbar" id="main-navbar">
<ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">
<li class="nav-item">
<a class="nav-link" href="#">PRODUCTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COMPANY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NEWSROOM-STORY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SPOTLIGHT:TECH
<?php //echo $spotlight; ?>
</a>
</li>
</ul>
<ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">
<li class="nav-item">
<a class="nav-link text-danger" href="#">CUSTOMER DASHBOARD</a>
</li>
<li class="nav-itemv">
<a class="nav-link text-danger" href="#">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRIVACY POLICY</a>
</li>
<li class="nav-itemv">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<!-- Language Menu -->
<ul class="nav navbar-nav mr-auto language-menu" id="language-menu">
<li class="nav-item">
<a class="nav-link" href="#">DE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</body>
</html>The additional CSS code is as follows:
.smaller_font{
font-size: 80%;
}
@include media-breakpoint-down(md){
.main-navbar{
border-bottom: solid 1px;
}
}Currently, I am attempting to use @include media-breakpoint-down(md){...} However, the design does not respond at all when the screen size is decreased.
The goal is to add a 1px bottom border to the fields in the menu.
I am aware that there is an option to hide elements and then make them visible as discussed here
or by setting pixel width using the "@media" tag, but using the "@include media-breakpoint-down()" tag seems more logical overall (just my intuition).
I need to find a way to make things work on a small scale so I can build from there :-)