I'm currently working on creating navigation using Bootstrap 4, but I've hit a roadblock in adjusting the li items to suit my navigation needs. I'm struggling to figure out how to select these li tags since they are nested in multiple classes. While I've managed to select a few classes with some online help, I would appreciate it if someone could explain how to target any class in CSS.
What steps should I take to select classes in CSS? Also, what is the most effective way to create a responsive website that is compatible with all devices? Which technology is considered the best in 2018?
img {
opacity: 0.7;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.navbar{
background-color: black;
}
.navbar-inverse{
background-color: black;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav > li > a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 20px;
padding-top: 10px;
padding-bottom: 10px;}
}
]<!DOCTYPE html>
<html lang="en">
<head>
<title>PW</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./CSS/pwCss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<img class="img-fluid" src="./img/ani.png" alt="Logo" height="70">
</div>
<ul class="nav navbar-nav" style="font-size: large;">
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
</nav>
<div class="container">
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="./img/ani.PNG" class="rounded" alt="Cinque Terre" width="304" height="236">
</div>
<div class="container">
</div>
</body>
</html>