I am really not good at this ... Below is my fumbling steps to a make a website mostly using W3.CSS. But I have run into some things that I do not know how to solve.
1, There is a border under the navbar and over the footer. The border is a few px shorter than the area (which is how I want it). But I don't understand why the border at footer right doesn't shrink like the navbar right does.
2, I have a logo on the same line as the navbar. I do not want the navbar to jump under the logo when getting too close, I want it to turn into a hamburger earlier. How do I change when the turn should happen?
3, Would it be possible to have a step in between? Today the navbar is an icon with text and then it turns to a hamburger. How do I make it icon with text -> icon-> hamburger when shrinking? I tried but it doesn't work, that is the area that I marked out with <"-- and so on. Another problem with this "try" is that the icons are on a separate row so the navbar is thicker. This is not not most important to fix, it would just be nice ...
4, Can I make the text in the navbar change color when hover? I do not want the whole button to change color, just the text. I tried this in the css but it does not work:
nav a:hover{
color: rgba(250, 160, 20);
}
Here is the HTML (there is also a CSS but it doesn't add much to these problems, just colors etc):
<html>
<head>
<meta charset="utf-8">
<title>Testing-testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="css/styles3.css">
</head>
<!-- BACKGROUND -->
<body class="w3-content w3-dark-grey" >
<!-- HOLDER -->
<div class="w3-black" style="max-width: 1024px">
<!-- NAVIGATION -->
<div class="w3-top">
<!-- TOP IMAGE -->
<div class="w3-display-container">
<img src="img/bg_header1536_3_2.jpg" style="max-width:980px"alt="Header image">
</div>
<!-- BAR -->
<nav class="w3-container">
<div class="w3-bar w3-border-bottom" style="max-width:944px">
<img src="img/logo_w_250.png" style="padding-bottom: 3px;" alt="Logo 250px wide"></img>
<span>
<div id="nav1" class="w3-right" style="max-width:944px">
<a href="home" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-home"></span> Home</a>
<a href="products" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-bolt"></span> Products</a>
<a href="downloads" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-download"></span> Downloads</a>
<a href="signin" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-sign-in"></span> Sign in</a>
<a href="contact" class="w3-bar-item w3-button w3-hide-small w3-hover-black"><span id="icon" class="fa fa-envelope"></span> Contact</a>
</div>
<!-- <div id="nav2" class="w3-right" style="max-width:500px">
<a href="home" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-home"></span> </a>
<a href="products" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-bolt"></span> </a>
<a href="downloads" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-download"></span> </a>
<a href="signin" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-sign-in"></span> </a>
<a href="contact" class="w3-bar-item w3-button w3-hide-small hide-large w3-hover-black"><span id="icon" class="fa fa-envelope"></span> </a>
</div>
-->
<!-- BURGER -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-medium w3-hide-large w3-hover-black" onclick="myFunction()">☰</a>
</span>
</div>
<div id="burger" class="w3-bar-block w3-black w3-right w3-hide w3-hide-large">
<a href="home" class="w3-bar-item w3-dark-grey w3-button w3-hover-black">Home</a>
<a href="products" class="w3-bar-item w3-dark-grey w3-button w3-hover-black">Products</a>
<a href="downloads" class="w3-bar-item w3-dark-grey w3-button w3-hover-blacky">Downloads</a>
<a href="signin" class="w3-bar-item w3-dark-grey w3-button w3-hover-black">Sign in</a>
<a href="contact" class="w3-bar-item w3-dark-grey w3-button w3-hover-blacky">Contact</a>
</div>
<!--
<script>
function myFunction() {
var x = document.getElementById("nav2");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace("w3-show", "");
}
}
</script>
-->
<script>
function myFunction() {
var x = document.getElementById("burger");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace("w3-show", "");
}
}
</script>
</nav>
</div>
<!-- EMPTY BAR BEHIND NAVIGATION -->
<div id="behind" class="w3-bar"style="margin:100px">
</div>
<!-- SECTION 1 -->
<div class="section">
<div class="w3-container">
<h1>Hello World!</h1>
</div>
</div>
<!-- FOOTER -->
<footer class="w3-bar w3-margin w3-border-top w3-center" style="max-width:944px">
<h6>© 2020 Testing-testing Systems</h6>
</footer>
</div>
</body>
</html>
Thanks for any help you can provide!