The styling of the first column in this row will be different from the rest

Despite having the same styling and no typing errors, I am still facing an issue with the first column not being styled correctly. It appears as nothing but text inside a column square.

HTML:

<div class="container-fluid">

  <!--Nav Bar-->
    <div class="row">
      <div class="col nav-bar-items">Home</div>
      <div class="col nav-bar-items">About</div>
      <div class="col nav-bar-items">Projects</div>
      <div class="col icon-items">
        <a class="icon-linkedin social-button borderless" href="http://linkedin.com/in/robert-renecker-85a561b8"></a></div>
      <div class="col icon-items">
        <a class="icon-github social-button borderless"href="http://github.com/robertrenecker"></a></div>
      <div class="col nav-bar-items">Contact</div>
    </div>

</div>

CSS:

.col + .nav-bar-items{
  font-weight:600;
  font-size: 25px;
  font-family: 'Source Code Pro', monospace;
  color: #99ebff;
  border-bottom: solid 5px #99ebff;

  border-right: solid 5px black;
}
.col + .nav-bar-items:hover{
  background-color: #99ebff;
  border-bottom: solid 5px black;
  color:black;

}
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Eliminate the usage of the + operator in your CSS code that has been provided here.

The selector .col + .nav-bar-items targets any .nav-bar-items elements immediately following a .col, which is why the first one is being excluded from styling.

To achieve the desired outcome, use the selector .col.nav-bar-items.

Answer №2

.col.nav-bar-items{
  font-weight:600;
  font-size: 25px;
  font-family: 'Source Code Pro', monospace;
  color: #99ebff;
  border-bottom: solid 5px #99ebff;

  border-right: solid 5px black;
}
.col.nav-bar-items:hover{
  background-color: #99ebff;
  border-bottom: solid 5px black;
  color:black;
}

since using the symbol + will target the next element in the HTML structure

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

Assign Multiple Values to a PHP Variable and populate an HTML input field with the value

This is the input field I am currently using. https://i.sstatic.net/0hv1q.jpg Here is how I am displaying/printing my variable. https://i.sstatic.net/3Fptg.jpg I am encountering the following error: Array ( [0] => Notice: Array to string conve ...

phphtmlarrays

Unexpected behavior: getElementById returning URL instead of element

I created a function that accepts a thumbnail path as an argument, waits for the bootstrap modal to open, and then assigns the correct path to the thumbnail href attribute within the modal. However, when I use console.log with the element(el), it displays ...

javascriptjquerytwitter-bootstrap

Tips for customizing css for image tags

Here is the CSS code I used for images: img { border: none; max-width: 100%; height: auto !important } To override specific image styles, I added this at the bottom: .locals-list>img { height: 35px; } Below is the HTML code I am work ...

htmlcss

Is it possible to execute our webpack (UI) build directly in a web browser without the need for a server?

Is it possible to run the build file bundle.js directly in the browser when using a reactjs setup with webpack dev server and webpack build? Also, when we deploy the build on the cloud, what exactly happens and how does our application run? ...

javascripthtmlreactjswebpackwebpack-dev-server

Navigation arrows for sliding`

Is there a way to add custom right/left arrows to the Ionic slider component? Demo: Check it out on Stackblitz Note: Make sure to refer to the home.html page for more details. https://i.sstatic.net/jQ62l.png .html <ion-slides [pager]="true" [slide ...

cssangulartypescriptionic3swiper.js

"Unable to Access Account: PHP Login Script Failing to Log Users In

I've encountered a login issue with my website script that I can't seem to figure out. The script is designed to log users in after they input their username and password, but for some reason, even with the correct credentials, authentication fai ...

phphtmllogin-script

Tips for optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...

javascripthtmlangularjs

Tips for extracting data from a JSON using a variable

I'm currently facing an issue in extracting data from a JSON file. I have declared a variable and am attempting to use its value to retrieve information from the JSON. However, I seem to be encountering an error that I can't identify. let e = &qu ...

javascripthtmljson

having difficulty choosing a single radio button at once

I'm having trouble selecting just one radio button at a time. Instead, multiple buttons are being selected. I'm new to HTML and this is the code I'm using. Can someone please assist me with this issue? <form name="ans_a" onsubmit="return ...

html

Zoomsounds: Injecting fresh content into div using data-source attribute

Currently, I am utilizing a javascript audio player called ZoomSounds. It generates circular play button divs and injects content into them using the following code: <div id="ap3" class="audioplayer-tobe skin-minimal" style="po ...

javascriptjqueryhtml

Trouble encountered when attempting to download PDF using jQuery

I have encountered an issue while trying to download a PDF using Ajax response HTML. Here is the code I am using: var newPDFAction = function () { $.ajax({ type: "post", url: '{{ route("admin.getCustomerSalesRepTota ...

htmljquerypdf

What could be causing my content to unexpectedly break out of its designated div structure?

My website on Wordpress is causing me trouble. When I input text directly into the HTML/CSS structure hardcoded style, it fits perfectly. However, when I attempt to do the same thing using Wordpress <?php echo the_content();?>, it ends up breaking ou ...

csswordpresstext

customizable path settings for sprites using css

Currently, I have a situation where I am using many sprites in my CSS file, and all the image locations are hardcoded within the CSS itself. Now, I am considering moving all these images to a CDN. The problem is that it's quite cumbersome to change th ...

pythoncssdjango

Looking to include a delete button for removing the currently selected tab in a Bootstrap tabs component

Currently, I am in the process of developing a travel website and have encountered an issue with implementing Bootstrap tabs in the admin section. I have managed to tackle some aspects, such as dynamically creating tab options. The problem arises when t ...

jqueryhtmltwitter-bootstrapbootstrap-4

Creating dynamically adjustable columns in Bootstrap

I've created a simple code for experimentation purposes: <!doctype html> <html lang='en'> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" ty ...

htmlcsstwitter-bootstrap

Automatically shift focus after being focused on

I recently created a piece of jQuery code for a mobile website. Whenever I tap on the delete button, it erases the input and directs the focus to another input area. However, it then automatically loses focus after using the focus() method. $(document). ...

jqueryhtml

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

I need to create a feature where hovering over a row in the first table will highlight a corresponding row in the second table. The highlighting should be based on the index of the hovered row. Here is an example: <div> <table> < ...

javascriptcssreactjsstyled-components

The functionality of Dompdf's style does not seem to be functioning properly

I've been experimenting with dompdf and while my script successfully generates a PDF document, the style tag seems to have no effect. Here's my code. I'm familiar with how it operates and have used it with pure HTML before, but this is my fi ...

phpcssdompdf

Tips for validating multiple inputs of the same type with identical names in JavaScript

I have limited experience with Javascript and am facing an issue with a HTML form that contains multiple input types with the same names occurring more than once. My goal is to validate the form before inserting the data into the database. I have managed t ...

phpjavascripthtmlformsvalidation

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

htmlcsswordpressbootstrap-4