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

"What is the best way to eliminate duplicate data from an ng-repeat loop in AngularJS

I have a query regarding appending data from the second table into $scope.notiData in AngularJS. Additionally, I need to figure out how to remove ng-repeat data when the user clicks on the remove symbol X. I have attempted some code but it is not functioni ...

javascripthtmlangularjs

What is the best way to distribute stroke width evenly on a rounded hexagon in an SVG?

I created a rounded hexagon with stroke width, but the top and bottom curves appear darker. Does anyone know how to evenly distribute the stroke width along the border? Here is my SVG code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox ...

htmlcsssvg

The android webview is having trouble loading HTML that includes javascript

I have been attempting to showcase a webpage containing HTML and JavaScript in an android webview using the code below. Unfortunately, it doesn't seem to be functioning properly. Can someone provide assistance? Here is the code snippet: public class ...

javascriptandroidhtmlandroid-webview

Enhance with Laravel combined with AngularJS

I've encountered some issues with the "edit" part while working on a Laravel + AngularJS CRUD application. An internal server error is being displayed, and I'm seeking assistance to understand its cause. Error "GET localhost/crudtcc/public/ap ...

javascriptphpmysqlangularjslaravel

Jest fails to pass when encountering the double colon

Having issues testing a React app using Jest. I encounter errors when running my code: FAIL src\App.test.js ● Test suite failed to run C:/Users/user1/Projects/map-editor/src/App.js: Unexpected token (40:33) 38 | <div cla ...

javascriptreactjsbabeljsjestjsecmascript-next

Highlighting of syntax within HTML elements marked with the <pre> tags

Is there a code library available that allows the display of code within <pre> tags while also highlighting syntax based on the programming language? For instance, displaying Python code like this: <pre class="python"> class MyClass: """A ...

pythonhtmlcsssyntax-highlightingpre

A simple method in JavaScript/TypeScript for converting abbreviations of strings into user-friendly versions for display

Let's say I am receiving data from my backend which can be one of the following: A, B, C, D Although there are actually 20 letters that could be received, and I always know it will be one of these specific letters. For example, I would like to map A ...

javascripttypescript

Exploring Passportjs Callbacks and parsing arguments

I'm struggling to grasp the concept behind the custom callback in Passport.js. I'm not sure why it requires (req, res, next) at the end. Shouldn't these values be obtained from closure? app.get('/login', function(req, res, next) { ...

javascriptnode.jsexpresspassport.js

The web server is unaware of the CSS and JS references

After loading my ASP.NET MVC project on the web server, I encountered an issue where none of my CSS and JS references were loaded. Some of the references in my default layout are listed below: <head> <link href="/Scripts/css/bootstrap ...

c#htmlcssasp.net-mvc

Refreshing the page causes Firebase authentication to vanish

My React app integrates Firebase authentication. However, I am facing an issue where the firebase:authUser is stored in localStorage upon successful login, but gets cleared on every page refresh resulting in a lost session. Surprisingly, browsing through o ...

javascriptreactjsfirebasefirebase-authenticationlocal-storage

Using a border-radius on Internet Explorer 11 reveals the background through the corners

Encountering issues with rounded borders in IE 11 (11.0.9600.18350)? Check out this minimal fiddle for more information: https://jsfiddle.net/7phqrack/2/ Here's the HTML code snippet: <div class="backgrounddiv"> <div class="outer"> ...

htmlcssinternet-explorer-11

Steps for refreshing Google reCAPTCHA on an AJAX-enabled webpage

I am encountering an issue with two captchas on my website. One captcha is loaded upon refresh, while the second captcha is loaded on a different page via ajax. The problem arises when I click on the "No" button after selecting it on the second page. I wan ...

javascriptjqueryajaxrecaptcha

Methods for organizing an array of objects by a specific key in JavaScript, but in the case of duplicate values, the objects can be sorted by a different

I'm struggling to sort an array of objects by two different keys. I need to first sort the array by price, and if there are multiple items with the same price, they should then be sorted by time. Here's what my array looks like: var myArr = [ {&q ...

javascriptarrayssorting

Tips for rearranging button placements by utilizing multiple owl carousels across various webpages

I have successfully implemented two owl carousels on my Shopify website, and they are both functioning properly. However, I am facing an issue with the navigation buttons on the second page. The navigation buttons seem to be picking up a style that I had i ...

javascripthtmlcssshopifyowl-carousel

Issues occurred when attempting to access information with postgres and nodeJS

Below is the configuration I have set up in my files: const express = require('express') const app = express() const port = 8000 const expense_model = require('./expense_model') app.use(express.json()); app.us ...

javascriptnode.jspostgresqlexpresscrud

The attention remains fixed at the top of the page

I have implemented an update panel along with pagination links using a repeater control at the bottom of my page. However, I am encountering an issue where clicking on the pagination links does not bring the page to the top. I attempted to use the followin ...

javascriptjqueryasp.net

What is the significance of the expression $location.path() equal to '/a' in Angular?

I am currently delving into AngularJs for the first time and I have been studying the Angular documentation in order to grasp its concepts. While going through it, I came across this piece of code: $location.path() == '/a'. However, I am struggli ...

javascriptangularjs

What is the significance of utilizing response.json() for accessing JSON objects on both the server and client sides?

Just starting out with the MEAN stack, I've included my API code below where I'm using res.json(random) to send a random password. module.exports.changePass = function (req, res) { console.log(req.body.email) db.user.find({ where: { name: ...

javascriptangularjsjsonexpressmean-stack

Having trouble receiving any ringing status in nextjs while utilizing the getstream SDK

I attempted to integrate the getstream video SDK for calling from the caller to the callee. While I can successfully create calls from the caller side, I am not receiving any status updates about the call on the callee side. Below are my codes for the cal ...

javascriptreactjsnext.jsgetstream-io

Executing jQuery on page update can be achieved by utilizing event handlers to trigger

I have implemented jQuery multi-select to enhance the user experience of my Django app's multiselect feature. Upon initially rendering my page, I included the following script to bind any elements with the class 'multiselect' to the jQuery m ...

javascriptjquerypythonhtmldjango