Issue with Bootstrap NavBar collapsing properly on first element

I'm currently working on developing a responsive navbar. Everything seems to be functioning well in larger window sizes, but when I view it on an xs screen, the first element of the navbar does not collapse properly. For reference, here are two examples:

First example, where everything is working fine: https://i.sstatic.net/Kmu66.jpg

Now, let's take a look at the second example: https://i.sstatic.net/6hdz7.png

The issue lies in "HOME" not collapsing as expected.

I have included snippets of both the HTML and CSS code for your reference:

html {
  background: url(Fondo.jpg) no-repeat center center fixed;
  /*Setting background image*/
  background-size: cover;
  /*Covering entire screen with background image*/
  overflow-y: auto;
  /*Adding scrollbar when zoomed*/
  font-family: Arial, Helvetica, sans-serif;
  /*Setting default font type*/
}

body {
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

h2 {
  color: #4CAF50;
}

...

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  
  ...

Your assistance in resolving this matter would be greatly appreciated!

Thank you for your help in advance!

Please refer to the following image for the desired outcome:

https://i.sstatic.net/W8ui0.png

htmlcssbootstrap-4

Answer №1

The issue lies with the styling applied to the button element.

You've defined CSS styles for the button tag, which is causing it to be applied to both the login and nav-bar buttons, resulting in incorrect output.

Take a look at the code snippet below:

// CSS styles for buttons
button.login{
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: 2px solid rgb(0, 0, 0);
    cursor: pointer;
    width: 100%;
    border-radius: 8px;
}

button.login:hover {
    opacity: 0.8;
}

I've assigned a specific class to your login button and separated its styling from that of the nav-bar button.

Check out the updated output here.

Answer №2

The reason your home link is not displaying correctly is because it is not nested within the collapse navbar-collapse div.

You can see the corrected version in this updated JS fiddle:

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

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

Unable to update div CSS using button click functionality

I have been working on this HTML/CSS code and I am trying to change the style of a div using a JavaScript button click event so that the div becomes visible and clickable. However, despite my efforts, it doesn't seem to be working as expected. Whenev ...

javascripthtmlcss

Use the powerful $.post() method to transfer an image to another page seamlessly

I have two pages, the first page contains a form where users can enter information such as name and mobile number. Additionally, they can upload an image. I would like to use jQuery to access the uploaded image and send it to another page using the $.post( ...

phpjqueryhtmlmysqlajax

Add to and subsequently remove the possibility of deleting that element

I encountered an issue while moving elements from one div (x) to another div (y). The problem is that the elements in div x are deletable, but once they are copied to div y, they cannot be deleted. Here is the initial state: https://i.sstatic.net/4yQ6U.pn ...

javascriptjqueryhtmlcss

Dynamic use of a mixin in LESS allows for greater flexibility in

Is it possible to dynamically call a mixin in Less CSS? An interesting use case could be creating a style guide: // Define the mixin that needs to be called .typography-xs(){ font-family: Arial; font-size: 16px; line-height: 22px; } // A mixin att ...

csslessmixins

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

angularhtmltypescriptangular5

HTML filtering using the <select> element

Is there a way to implement this script for options instead of buttons? The goal is to filter the HTML section, but it seems to not work with <option> tags. Instead of displaying the all class, it shows nothing. CSS .show { display: block; } .filt ...

javascripthtmlcssbootstrap-5

How to customize the appearance of the Facebook login button alongside other login options

I'm having trouble positioning the Facebook login button in my header. It keeps appearing far to the left and below other links :) I'm currently testing it on this page: My goal is to have the button display just to the left of the login link a ...

htmlcsslayoutstyling

Angular Tutorial: Modifying the CSS transform property of HTML elements within a component directly

Currently, I'm in the process of developing an analog clock for a project using Angular. My challenge is figuring out how to dynamically update the sec/min/hour handlers on the clock based on the current time by manipulating the style.transform prope ...

htmlcssangulartypescriptcss-transforms

Arrange three div elements to create a layout that is optimized for different screen sizes

Is there a way to align these 3 divs as follows: pickup on the left, phone in the middle, and delivery on the right? I've browsed through similar alignment issues on Stack Overflow, but none of the solutions seem to work for my specific code. It' ...

htmlcssalignmentcenter

How to create a transparent background image in a Jekyll theme without impacting the visibility of the foreground

I'm new to HTML and CSS, currently working with a Jekyll boostrap landing theme from GitHub to create a static responsive website. I'm looking to change the background image on the theme and make it transparent to enhance the visibility of the fo ...

htmlcsstwitter-bootstrap

Background: Cover causing image to be cut off

I'm having trouble trying to display the top part of a background image under my current navigation bar. I've been unable to identify what mistake I may be making here. Here is my HTML code: <section class="jumbotron"> <div class=" ...

htmlcsstwitter-bootstrap

Rails pagination will only show the link to the current page

Is there a way to show only the current page link with the << Previous link hidden when on the first page and next >> link hidden when on the last page? It should look like this: On the first page: 1 | next >> On the last page (with 4 ...

htmlcssruby-on-railswill-paginate

What could be causing the <img src= ' '/> tag to malfunction in Express?

While learning about HTML, I noticed that simply using img src="...." worked fine. However, when working with Express, the same code did not work! The documentation mentioned that I needed to place the images in a folder named public, require(&ap ...

javascripthtmlnode.jsexpressserver

Tips for removing borders around a textbox with a background image: When incorporating a background image into a

After removing the default borders on a textbox using outline:none;, I noticed that adding a background image caused the border to reappear, and I couldn't get rid of it! How can I solve this issue? Here is the code for the textbox: <input type = ...

htmlcss

The issue of an HTML button positioned on top of an image not remaining fixed when the browser window is resized

After mastering the art of placing an html form element on top of an image, I am now facing the challenge of making sure that the button remains intact even when I resize the window. For a reference, please visit: Note: Despite its simplicity, I acknowle ...

htmlcss

Challenges with Bootstrap input groups

Despite trying various solutions, nothing seems to be working for me. I attempted using width:200px, but the issue persists. Since my form was quite outdated, I decided to switch to a bootstrap version. However, while others are able to resolve the issue w ...

htmlcsstwitter-bootstrap

Having trouble displaying all 6 columns in the Bootstrap carousel - only 3 columns are showing up

I came across this inspiring Codepen and decided to tweak it to support Bootstrap's col-md-2 class. Despite my efforts, only 3 columns are showing up. I suspect that neighboring cards of the active card receive additional classes for display purposes ...

jquerybootstrap-4

jQuery: Eliminate the inline display property of "none"

Trying to figure out how to remove inline styles added by jQuery on hover from the current menu item in the navigation. I want the current menu item to remain visible even after hover, but jQuery is setting it to display:none. I attempted to add "display: ...

jquerycssmenunavigationinline-styles

Tips for Preventing Page Scrolling When Clicking on a Hashed A Tag in Content with a Fixed

Currently stuck dealing with a challenging problem related to hashed anchor links. Here's a basic representation of the HTML code: <div class="main-wrap"> <header></header> <aside> <nav> <ul> ...

htmlcsscss-positionanchorfragment-identifier