Jump to content

From buttons with text to burger

Peztis

By Peztis
in HTML/XHTML

 Share

Recommended Posts

Peztis Newbie

Peztis

Posted
Posted

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!

Link to comment
Share on other sites
JMRKER Member

JMRKER

Posted
Posted

Hello and welcome to the forums.

I have corrected some of your code to address items #1 and #4 above. 
The changes are primarily in the <style> section which can be linked to an external file if desired

I think the dependence on the w3- css is a major part of your problem
as it contains LOTS of commands that may override many of the settings you wish to change.

I haven't figured out the problem #2, but I suspect it has something to do the with width settings
when the hamburger menu is to be executed.  I gave up because I got tired of looking at the w3-css interactions.

My personal suggestion would be to look into a 'grid' or 'flex' presentation and replace a majority of the w3-stuff.
If you combine it with some css 'media' settings for when the changes occur, it might be able to solve the #3 problem.

Here is what I have changed so far... (I also changed your indentation as it was too wide for me to follow easily)
Look at the differences from your code to see where the effects are implemented. 

<!DOCTYPE html><html lang="en"><head>
<title> Test Page </title>
<title>Testing-testing</title>
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>

<!-- For: https://w3schools.invisionzone.com/topic/61593-from-buttons-with-text-to-burger/ -->
<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>

<style>
 #logo { padding-bottom: 3px;; }
 #topImage { max-width:980px; }
 #nav1 { max-width:944px; }
 #nav1 a:hover { background-color: yellow; }
 #nav2 { max-width:500px; }
 #behind { margin:100px; }
 footer { max-width:944px; }
 .w3-button:hover { color: magenta !important; background-color:yellow !important; }
</style>

<!-- 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 id="topImage" src="img/bg_header1536_3_2.jpg" alt="Header image">
    </div> 
<!-- BAR -->
    <nav class="w3-container">
      <div class="w3-bar w3-border-bottom" style="max-width:944px">
        <img id="logo" src="img/logo_w_250.png" alt="Logo 250px wide"></img>
      <span>
        <div id="nav1" class="w3-right"> 
          <a href="home" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-home"></span> Home</a>
          <a href="products" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-bolt"></span> Products</a>
          <a href="downloads" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-download"></span> Downloads</a>
          <a href="signin" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-sign-in"></span> Sign in</a>
          <a href="contact" class="w3-bar-item w3-button w3-hide-small"><span id="icon" class="fa fa-envelope"></span> Contact</a>
        </div>

<!--    <div id="nav2" class="w3-right"> 
          <a href="home" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-home"></span> </a>
          <a href="products" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-bolt"></span> </a>
          <a href="downloads" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-download"></span> </a>
          <a href="signin" class="w3-bar-item w3-button w3-hide-small hide-large"><span id="icon" class="fa fa-sign-in"></span> </a>
          <a href="contact" class="w3-bar-item w3-button w3-hide-small hide-large"><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" 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">Home</a>  
      <a href="products" class="w3-bar-item w3-dark-grey w3-button">Products</a>
      <a href="downloads" class="w3-bar-item w3-dark-grey w3-button">Downloads</a>
      <a href="signin" class="w3-bar-item w3-dark-grey w3-button">Sign in</a>
      <a href="contact" class="w3-bar-item w3-dark-grey w3-button">Contact</a>
    </div>
    </nav>
  </div>    
        
<!-- EMPTY BAR BEHIND NAVIGATION -->
  <div id="behind" class="w3-bar">
  </div>
           
<!-- SECTION 1 -->
  <div class="section">
    <div class="w3-container">
      <h1>Hello World!</h1>
    </div>
  </div>

<!-- FOOTER -->
 <footer class="w3-margin w3-center w3-border-top">
   <h6>© 2020 Testing-testing Systems</h6>
 </footer>
</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>

</body>
</html>

 

Link to comment
Share on other sites
JMRKER Member

JMRKER

Posted
Posted

Playing around with your layout using a 'grid' display.  (Just for fun and my own learning/practice) :)
It does not currently have a 'hamburger' icon changes, but you could see how it could be added easily.

I removed all of the 'w3-css' stuff and put in some sample commands with colors.
Should be much smaller and faster to load.  Color backgrounds inserted for design layout only.
The color stuff along with changes for font-size and font-families are an easy modification.


Let me know your thoughts.  If interested in continuing, I'll look into the 'hamburger' requirements.
Feel free to totally ignore the suggested layout, but it should be much easier to maintain. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Flex Menu </title>
<!-- For: https://w3schools.invisionzone.com/topic/61593-from-buttons-with-text-to-burger/ -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
 .container { border: 1px solid black; }
 .containerTop {
    display:grid;
    grid-template-columns:1fr 4fr; 
 }
 .containerMiddle {
    display:grid;
    grid-template-columns:1fr; 
    background-color: #ccc;
 }
 .containerBottom {
    display:grid;
    grid-template-columns:1fr; 
    background-color: cyan;
 }
 hr { margin: 0 2%; font-weight: bold; }
 ul {
    list-style-type: none; cursor: pointer;
    margin: 0.25em 0.25em; padding: 0.25em 0.25em;
 }
 li { display: inline-block; font-size: 1.5em; }  /* default is vertical display */

 #logo {
    min-height: 5em; min-width: 250px;
    background-color: yellow;
 }
 #nav1 {
    min-height: 5em; text-align: right;
    background-color: tan;
 }
 #nav1 a:hover { background: lime; }
 #main { height: 20em; }
 footer { text-align: center; font-size: 1.2em; }

/* adjust widths as needed */
 @media (max-width:40em) {
    .containerTop { grid-template-columns:1fr 3fr; }
 }
 @media (max-width:20em) {
    .containerTop { grid-template-columns:1fr 1fr; }
    li { display: block; }  /* default is vertical display */
 }
/* */
</style>
</head>
<body>
<div class="container">
  <div class="containerTop">
   <div id="logo">
     <img id="logo" src="img/logo_w_250.png" alt="Logo 250px wide"></img>
   </div>
   <div id="nav1">
     <ul> 
       <li> <a href="home"><span id="icon" class="fa fa-home"></span> Home</a> </li>
       <li> <a href="products"><span id="icon" class="fa fa-bolt"></span> Products</a> </li>
       <li> <a href="downloads"><span id="icon" class="fa fa-download"></span> Downloads</a> </li>
       <li> <a href="signin><span id="icon" class="fa fa-sign-in"></span> Sign in</a> </li>
       <li> <a href="contact"><span id="icon" class="fa fa-envelope"></span> Contact</a> </li>
     </ul>
   </div>
 </div>

 <div class="containerMiddle">
   <hr>
   <div id="main">
     <h1> Hello World! </h1>
   </div>
 </div>

 <div class="containerBottom">
   <hr>
   <footer>
     <h6>© 2020 Testing-testing Systems</h6>
   </footer>
  </div>
</div>
</body>
</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...