Blogger's dropdown navbar appears to be malfunctioning and is currently not

Having some trouble with the dropdown menu in my navbar:

It's working fine when I test it on my browser, but once I put it on my blogger site, it stops functioning completely:

Here is the code snippet along with the expected output:


Result Size: 945 x 903
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}
​
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
...

The link isn't functional in the blog environment: https://i.sstatic.net/V9ujX.png

I intend to populate this dropdown with popular posts, archives, and tags from the blog.

PS: Utilizing blogger for my website.

Thank you! =)

Updated:

This is how I'm implementing the navbar:


<div id='header-holder'>
    <header class='clearfix'>
        ...
        </div>
    </header>
    <div class='navbar'>
        ...
    </div>
</div>

The css within the blogger looks like this:


.dropdown .dropbtn {
  cursor: pointer;
  ...
}

...
htmlcssnavbar

Answer №1

I have resolved the issues in your code

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            overflow: hidden;
            background-color: #B3D6FD;
            font-family: Giorgia;
            height: 50px; /* Changed height to make it bigger */
        }

        .navbar a {
            float: left;
            font-size: 16px;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .dropdown {
            float: left;
            overflow: hidden;
        }

        .dropdown .dropbtn {
            cursor: pointer;
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        .navbar a:hover,
        .dropdown:hover .dropbtn,
        .dropbtn:focus {
            background-color: #00A2FF;
            color: #fff;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #B3D6FD;
            color: white;
            min-width: 160px;
            z-index: 1;
        }

        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            color: #fff;
        }

        .dropdown-content a:hover {
            background-color: #00A2FF;
        }

       .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>

    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <div class="dropdown">
            <button class="dropbtn">Dropdown
                <i class="fa fa-caret-down"></i> /* Corrected closing tag for <i> element */
            </button>
            <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>
        </div>
    </div>
</body>

</html>

The main issue was with incorrect closing of the <i> tag and setting an inadequate height for the navbar.

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

Display a particular div upon clicking a specific link, while concealing the other divs

As a beginner in the world of jQuery and coding, I'm encountering some difficulties that I need help with. My goal is to have the 'Vlogging' link activated and show 'Details 1' when the page loads. Then, upon clicking on either &a ...

javascriptjqueryhtmlcss

Nuxt3 - TS2339: The 'replaceAll' property is not found on the 'string | string[]' type in Nuxt3

Hey there! I've been experimenting with the replaceAll() method within my Nuxt3 project and encountered a strange error. Folder Structure ───pages │ └───Work │ │ index.vue │ │ [Work].vue Template <templat ...

htmltypescriptvue.jsnuxtjs3

`Add new text next to the existing text in a label element`

I need help adding new text directly after the Email: and Password: labels using JavaScript. How should I proceed? The text should be placed immediately after Email: and Password: within the two labels. <div class="container"> <div class ...

javascripthtmlcss

When the navbar toggler icon is activated, it shifts to the left side, overlapping the logo that is originally situated on the

Currently, I am implementing a collapsible navbar feature using Bootstrap 4. The issue I'm facing is with the alignment when the screen size shrinks and the navbar toggler becomes active. While the menu items are hidden on the right side, the toggler ...

htmlcssbootstrap-4

Generate two separate CSS files (Mobile and Desktop versions) by compiling a Stylus (.styl) file using Node.js

Can a single Stylus file be compiled into two separate CSS files? For example, one optimized for mobile without the -moz and webkit elements, and another for cross-browser applications? Thank you. ...

cssnode.jsstylus

Keeping the Select option chosen even after form submission in PHP

I've been exploring various community forums, but I'm struggling to retain the selected option value after a validation error. Although this code works for me initially, the values disappear once the submit button is clicked. <select id="ser ...

phphtmlweb-applications

Only the circle's center reveals the background color

I am trying to create a design with a yellow background and a circle that has a grey border. I want everything outside the circle to be white, while the inside of the circle should reveal the yellow background from the div below it. I am looking for a CSS ...

jquerycss

The jQuery pagination feature combined with the :hover pseudo-class

Here is a link to my website: Gutdesign If you click on TV located on the left side, you will see a list of projects. Everything looks good to me, but I am having trouble figuring out how to hide the orange arrows at the start. I want them to appear only ...

jqueryhtmlcsspagination

Tips for incorporating a set offset while utilizing the scrollTop() function

I have successfully implemented a code that sets a position:fixed to a div when it scrolls past the top of the screen. The code I used is as follows: var $window = $(window), $stickyEl = $('#the-sticky-div'), elTop = $stickyEl.o ...

javascriptjqueryhtmlcsstwitter-bootstrap

A guide on expanding an HTML table dynamically with MVC razor syntax

My goal is to dynamically add new rows to a table by following the advice given in this answer on Stack Overflow: Add table row in jQuery I have successfully implemented it for one of my table requirements as seen below: function onAddItem() { $( ...

javascriptjqueryhtmlcssrazor

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

javascriptjqueryhtmlasp.net-mvc

Using jQuery to modify the border of a particular row

I am facing an issue where I need to apply a border to two specific rows in a table after it has loaded. These two rows are consistent every time the table is loaded. The code snippet below works, but the default line breaks between the table rows prevent ...

jqueryhtmlcsstwitter-bootstrap

Resetting the Countdown Clock: A Transformation Process

I have implemented a countdown timer script that I found online and made some adjustments to fit my website's needs. While the current setup effectively counts down to a specific date and time, I now require the timer to reset back to a 24-hour countd ...

javascriptjqueryhtmlcsstimer

display a different selection option depending on the previously chosen item

I'm working on displaying additional options in a select box when the user makes a selection from the main select box. I've set display:none for the select boxes, which will only appear when the user chooses an option from the main select box. C ...

javascriptjqueryhtmlcssdrop-down-menu

Guide to Pechkin: Instructions and Resources

After testing out wkhtmltopdf successfully, I faced an issue on the server where I couldn't start a process. My alternative solution would be to use this library: https://github.com/gmanny/Pechkin However, I am unsure of how to integrate it into my p ...

c#htmlpdfpechkin

Illuminate the rows in a table generated from a parsed text file using PHP

I am facing an issue with my PHP logic for selecting and highlighting rows in a table based on dropdown selection. I have a group of text files that are parsed into a table, and I need to highlight rows that match selections from 5 dropdowns created from t ...

phphtmlparsingselecttext

Utilizing HTML documents instead of images in Owl Carousel 2

I am currently utilizing owl carousel 2 to construct a basic sliding carousel. However, I am only using images at the moment and would like to incorporate HTML files instead. These HTML files contain multiple divs where images can be inserted, and instead ...

javascripthtmlowl-carousel

Is it possible to utilize an integrated web browser (like Chrome) as the graphical user interface toolkit for Java desktop applications?

Wow, those HTML5 websites really stand out - but why is it that my Java desktop apps just don't have the same visual appeal? Swing and SWT seem outdated in comparison. They get the job done, but creating modern GUIs with animations and other flashy fe ...

javahtmluser-interfacegoogle-chromedesktop

Delete the right border on the items in the bottom row

I have a list of items with three rows. I want to separate the first and second row with borders, so I added a right border to those items but excluded the third row from having borders. .test-row { display: grid; grid-template-rows: 1fr 1fr 1fr; ...

htmlcsscss-selectors

Radio buttons are not having the :invalid pseudo class properly applied

Looking to style a radio group with a required attribute. Attempting to adjust the appearance of the radio group depending on whether an input is selected or not. However, it appears that the :invalid pseudo-class does not apply to radio buttons. ...

csshtmlradio-button