• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Can't make that nice Hamburger menu work.

SpongeBOB

SpongeBOB

Well-Known Coder
Hi everyone,

I've found a nice hamburger menu -> https://codepen.io/Twikito/pen/zGdqVO?editors=1100

The problem is when I paste the HTML code show in the html of this code pen in a base html page ->
[CODE lang="html" title="Base" highlight="8,12"]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger</title>
<style>
/* code pen css will go here */
</style>
</head>
<body>
<!-- code pen css will go here -->
</body>
</html>[/CODE]

I do not have the same result ->
2021-06-19-0746.png

So the Hamburger shape is not appearing and this checkbox to not trigger the menu..

Any ideas.. ?

Thanks
 
Solution
simong1993
Hey so looking i can see no way this is done without Jquery or Java so upon looking, Pen Settings has
Code: 
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,700|Roboto+Condensed:700'><link rel="stylesheet" href="./style.css">

Add this one to the bottom just above </body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

try adding them to your header and see if it makes a difference, i have also attached the file from code pen that make these work :D Unzip...
Sort by date Sort by votes
Hey so looking i can see no way this is done without Jquery or Java so upon looking, Pen Settings has
Code: 
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,700|Roboto+Condensed:700'><link rel="stylesheet" href="./style.css">

Add this one to the bottom just above </body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

try adding them to your header and see if it makes a difference, i have also attached the file from code pen that make these work :D Unzip it and you want the 3 files inside Dist.
 

Attachments

  • ui-with-ux-improvements-with-only-css.zip
    8.2 KB · Views: 2
Upvote 1 Downvote
Solution
Sorry, I typed that in hurry. I did not mean that codepen does not include js in download. It does include js file. I just wanted to tell him that if he download the code from codepen he will get the html and css code. There is js file in download but it is blank. I have downloaded it and check that in my localhost.
 
Upvote 0 Downvote
BGB said:
Sorry, I typed that in hurry. I did not mean that codepen does not include js in download. It does include js file. I just wanted to tell him that if he download the code from codepen he will get the html and css code. There is js file in download but it is blank. I have downloaded it and check that in my localhost.
Click to expand...
We all do it :D Yeah the JS file is blank as hes getting the scripts from an external source :D
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

300x250
Top Bottom