Hello,
I am trying to create a situation where I have navigation links on the navigation bar in desktop view, 3 links will be on the left while 4 links will be on the right.
When I minimize the window to mobile view, those links on the right should disappear and be on the slide navigation.
I have below my HTML and JavaScript codes that show my page and how the slide navigation slides from the left and covers the screen.
I want the links on the right NOT to display in mobile view, but display when in desktop view.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500&display=swap" rel="stylesheet"/>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title></title>
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 30px;
text-decoration: none;
font-size: 14pt;
color: #ffffff;
display: block;
transition: 0.3s;
margin-top: 0 auto;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 5px;
right: 20px;
font-size: 35px;
}
@media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .closebtn {
font-size: 20px;
top: 5px;
right: 35px;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-lg navbar-dark navbar-fixed-top" style="background-color: #12254d; font-family: Nunito; font-size:11pt;">
<a class="navbar-brand" href="Home.aspx" style="font-family:Nunito; font-weight:bolder;">Yearlance</a>
<a class="nav-link" href="#" style="font-weight:bolder;">About<span class="sr-only">(current)</span></a>
<a class="nav-link" href="#" style="font-weight:bolder;">Contact</a>
<a class="nav-link" href="#" style="font-weight:bolder;">link 3</a>
<a class="nav-link" href="#" style="font-weight:bolder;">link4</a>
<div style="float:right;">
<a class="nav-li" href="#" style="font-weight:bolder;">link4</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #12254d; border-color: white; border-width: 1px; color: white">
<span class="navbar-toggler-icon" style="font-size:8pt;" onclick="openNav()"></span>
</button>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
</nav>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
