Something seems to be preventing Div from appearing and there are no error messages appearing

I've been attempting to create a menu, but the toggle div for the menu isn't visible

Following a tutorial where an individual sets up a menu, there is a div with a menu icon in the top left corner. Despite meticulously copying the code from the HTML and CSS files, nothing displays on my screen. The image I'm using is identical to the one in the tutorial's folder. Link to YT HTML & the Link to YT CSS

.btn-toggle-nav {
  width: 60px;
  height: 100%;
  background-color: #F98F39;
  background-image: url("img/menu.png");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
  cursor: pointer;
}
.btn-toggle-nav:hover {
  opacity: 0.5;
}
<nav class="nav-main">
 <div class="btn-toggle-nav"></div>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Biography</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

The anticipated outcome should mirror that shown in the video. Here is the link

javascriptcss

Answer №1

Here's a suggestion for adding height in pixels:

  .btn-toggle-nav {
            width: 60px;
            height: 46px;
            background-color: #F98F39;
            background-image: url(img/menu.png);
            background-repeat: no-repeat;
            background-size: 40%;
            background-position: center;
            cursor: pointer;
            display: inline-block;
        }
        
        ul {
            display: inline-block;
        }
        
        .btn-toggle-nav:hover {
            opacity: 0.5;
        }
 <nav class="nav-main">
    <div class="btn-toggle-nav"></div>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Biography</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger Javascript on 'Nearby' input from Html form

I have a JavaScript code that retrieves the latitude and longitude of users from their device for a local search. Although everything works correctly, I want to make sure the script is only executed if the user specifically selects "nearby" as the locatio ...

javascriptjqueryhtmlformsgeolocation

Using browserify "require" in console: A step-by-step guide

My Rails project now includes the browserify and pinyin packages, thanks to the browserify-rails installation. To find out more about the pinyin package, check out this link: https://github.com/hotoo/pinyin var pinyin = require("pinyin"); console.log(pin ...

javascriptruby-on-railsbrowserify

When trying to find a substring within a string in JavaScript, the "else if" statement may not be triggered

I'm currently working on creating a Hangman game using HTML and JS. Most of the code is functioning properly, but I've hit a roadblock. For some reason, one part of my if else statement isn't working correctly. Here's the line of code: ...

javascripthtml

Issues with Google Analytics Event Tracker Inconsistent Performance

I am experiencing an issue with a Google Analytics event that is triggered when a user clicks on a form submission button to enroll in a course. The event uses data attributes within the button element. What's puzzling is that the event seems to be w ...

javascriptjquerygoogle-analyticsuniversal-analytics

What is the best way to notify my form that a payment has been successfully processed?

I'm working on a form that has multiple fields, including a PayPal digital goods button. Clicking on this button takes the user out of the website's workflow and into a pop-up window for payment processing. Once the payment is completed, the retu ...

phpjavascriptpaypal

Sending data to server using Ajax and jQuery

Hey there, experiencing a little hiccup in the back-end of my system when I try to submit my form. It keeps showing me an error saying Unidentified index: file1 . Can't seem to pinpoint where the issue lies in my code. Even though I'm no beginner ...

javascriptphpjqueryajaxcodeigniter

When using Vue.js, the class binding feature may not function properly if it is referencing another data property that has variants

I am currently developing a basic TODO application. Within my index.html file, I have a main div with the id #app. Inside this div, there is another div with the class .todobox where I intend to display different tasks stored in my main.js file. Each task ...

javascriptcssvue.jsvuejs2vue-component

Issue with npm installation leading to missing node_modules directory

When attempting to run npm install . in a local directory, I keep encountering the following errors: npm ERR! install Couldn't read dependencies npm ERR! Darwin 15.2.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "." npm ERR! no ...

javascriptnode.jsnpm

Is there a way to trigger jQuery animations even when the browser window is not in focus?

Hi there, I am currently working on developing an ajax-based multiplayer game that connects to a server for updates. The game has various game states and requires the GUI to be animated accordingly. However, I have encountered a problem where jquery anima ...

javascriptjqueryajaxanimationfadein

Transferring data from one of the three submitted forms by utilizing jQuery's AJAX function

Currently, I am facing a challenge with three forms on a website, where two of them are located in modal windows. My goal is to use ajax to send input values such as name, phone, email, and radio button selections (which vary in each form). However, I have ...

javascriptjqueryajax

Offering various language options on a website determined by the URL

I've been contemplating how to add multi-language support to my personal website, which I developed using ExpressJS and NodeJS with EJS as the template engine. Currently, the website is only available in English, but I want to add a German version as ...

javascripthtmlnode.jsexpressejs

What are some creative ways to utilize postMessage instead of relying on nextTick or setTimeout with a zero millisecond delay?

I just came across a theory that postMessage in Google Chrome is similar to nextTick. This idea somewhat confused me because I was under the impression that postMessage was primarily used for communication between web workers. Experimenting with expressio ...

javascript

Deleting items from an array in ReactJS

When retrieving a list of users from AWS Cognito, everything works flawlessly. However, the task of iterating over this array and removing users that do not match a specific Client ID is where I'm facing difficulties. What am I doing wrong in this sc ...

javascriptarraysreactjs

Guide to linking a label to a checkbox without utilizing the "for=id" method

Below is the code snippet I am currently working with: <li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li> <li><inp ...

htmljquerycsscheckbox

Having trouble getting the header div to span the entire screen

I'm currently working on a project where I have set the header div to 100% width and the main container to also be 100% width. However, I am facing an issue where the right and left sides of the header are not filling the entire space. I managed to fi ...

htmlcssheightwidth

How to display a minimalist white dot in three.js

I am currently working with THREE.WebGLRenderer and I have a requirement to display multiple white dots of the same size at specific locations in 3D space. Is it recommended to use sprites, calculate the 2D screen coordinates, and utilize SpriteMaterial w ...

javascriptthree.js

The scrollbar track has a habit of popping up unexpectedly

Is there a way to prevent the white area from showing up in my divs where the scroll bar thumb appears? The issue seems to occur randomly on Chrome and Safari. This is the div in question .column-content{ height:60vh; padding: 10px 3px 0 3px; overf ...

htmlcssangularscrollscrollbar

How to dynamically increase vote tallies with React.js

The voting system code below is functioning well, displaying results upon page load. However, I am facing an issue where each user's vote needs to be updated whenever the Get Vote Count button is clicked. In the backend, there is a PHP code snippet ...

javascriptreactjs

The input data from the MySQL database requires two page refreshes in order to be retrieved

Every time I input new values into the form fields and submit them, the page needs to be reloaded twice to display the updated values. For example, consider the $balance_2 in the 7th line. This line calculates the sum of all row values and updates the Bal ...

javascriptphpjqueryhtmlmysql

Unable to prepend '1' to the list

My goal is to display a list as '1 2 3...', but instead it is showing '0 1 2...' var totalLessons = $('.lesson-nav .mod.unit.less li').length; for (var i = 0; i < totalLessons; i++) { $('.lesson-nav .mod.unit.les ...

javascriptjquery