CSS border alignment techniques

I am attempting to achieve the effect of having an orange border on top of a blue border, with only the orange border moving. I have noticed this design feature on various websites but have been unable to replicate it without removing the padding of the parent div.

nav.navbar.navbar-light {
  border-radius: 0;
  border-bottom: 1px solid #97B6D0;
  /*box-shadow: 0px 1px 2px #5286B1;*/
}
nav.navbar.navbar-light > ul.nav.navbar-nav > li.nav-item.active > a.nav-link {
  color: #5286B1;
  border-bottom: 2px solid #F7A411;
}
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />
<header class="container">
  <nav class="navbar navbar-light">
    <a class="navbar-brand" href="#">
      <img src="img/Xeeva_only_xeeva_sign_h_38 copy.png" width="43" height="38" alt="" />
    </a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Opportunities</a>
      </li>
    </ul>
  </nav>
</header>

Here is the code snippet on JS Fiddle for reference:

JSFiddle Link.

htmlcss

Answer №1

To enhance the appearance of your list, consider adjusting the padding and borders in the CSS. I made some changes to your code:

/* Navigation*/

nav.navbar.navbar-light{
    border-radius: 0;
    border-bottom:1px solid #97B6D0;
    padding-bottom:0;                   /*UPDATED*/
}
.navbar-nav .nav-item {
  margin-bottom:-1px;                   
}
nav.navbar.navbar-light > ul.nav.navbar-nav > li.nav-item.active > a.nav-link {
    color: #5286B1;
    padding-bottom:15px;                
    border-bottom:2px solid #F7A411;
}

Check out the revised code here: http://jsfiddle.net/mpnLjr04/2/

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

Webpack 5 is unable to load animated gif files

Hello, I am currently diving into webpack and following the official documentation at https://webpack.js.org/guides/asset-management/#setup. My goal is to incorporate an animated gif using webpack 5. Although the placeholder for the gif is loading, I enco ...

javascripthtmldomgifwebpack-5

Trouble displaying portrait images in CSS slideshow

My portfolio includes an image slider called wow slider, which can be found at You can view my site with the image slider on this page: http://jackmurdock.site50.net/StudioWork.hmtl While most of the galleries display portrait and landscape images correc ...

jqueryhtmlcss

Remove underlining from a Custom Link when hovering over it

Is there a way to remove the blue underline from my custom donate button? I created it by going to Appearance -> Menus -> Custom Link. The issue is that this custom link (donate button) is inheriting the same CSS as the navigation menu items, which I ...

csswordpress

Tips for verifying if two passwords match during registration and displaying an error message if they do not match

How can I ensure that the passwords entered in a registration form match and how do I validate the entire form to be correct? <form id="registerForm" method="POST" action="/register" class="form2"> ...

javascripthtmlcss

Adding Data to a Database Using Ajax with PHP

I am trying to use Ajax to insert data into a database, but I keep encountering this error: Uncaught ReferenceError: insertData is not defined at HTMLInputElement.onclick (Modal.php:105) Error screenshot: The HTML and JS for this functionality are in ...

javascriptphpjqueryhtml

Creating stylish rounded corners for the table header with a specific background color using CSS

I am a beginner in HTML/CSS and I am trying to create a table with rounded top corners and a different background color for the header line. I have been able to achieve each individually with the help of online resources but I am struggling to combine the ...

htmlcss

JavaScript progress bar with extended duration, inspired by the success-oriented approach

Currently, I am in search of a unique solution or plugin that can replicate the same effect as Kickstarter's crowd fund long term progression bar. It seems like existing solutions only offer short term dynamic progress bars that indicate the percentag ...

javascriptjquerycssjquery-ui

Navigate to the top of the page prior to updating the Link route in NextJS

Whenever I click on a link to navigate to a new page, the page loads and immediately scrolls to the top. I want to change this behavior so that the scroll resets to the top before the new page is rendered. You can observe this issue on . If you scroll do ...

javascripthtmlreactjsscrollnext.js

The Safari 7.1+ browser seems to be having trouble with the spotlight effect

Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights? http://codepen.io/cchambers/pen/Dyldj $(document).on("mousemove", function( ...

javascriptjqueryhtmlcsssafari

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

Seeking help to implement toggle buttons for checkboxes on a page with a large table fetched from an external system. The table can have over 200 rows or more. Currently, I am facing an issue where I can only access and manipulate the visible checkboxes o ...

javascripthtmldom

Creating form elements without utilizing the <form action: MAILTO:> attribute

I'm in the process of designing a website with a side bar that features a form on every page. I'm looking for a way to have the form information submitted to an email address without using the action: MAILTO:? Would it be possible to create a sep ...

phphtmlforms

Ways to enlarge the parent container and reveal a concealed child element upon hovering without impacting neighboring containers

Currently, I am diligently working on the company service boxes and have a particular need... When hovering over: 1. The parent div should scale up and acquire box shadow without impacting the neighboring service boxes (it should appear to stand out above ...

javascriptjqueryhtmlcss

How can white space be maintained using <select> and <V-for> in Vue.js?

Using select and v-for to display values can be tricky when dealing with white space, such as "a a - ". Sadly, most of the white space gets removed when the values are shown and returned to the backend. Here is the code snippet illustrating the i ...

htmlvuejs2

Unable to create property within array in model

I am facing an issue while trying to access the name property of an array called Model[] generated from my Model.ts file. When attempting to use it in my app.component, I receive an error stating that the property 'name' does not exist on type Mo ...

javascripthtmlarraysangulartypescript

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

javascripthtmlcssweb

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

angularhtmlng-bootstrap

Attempting to consistently place an element at the bottom of my div container

I am attempting to align my <span class="fechar_fancy">Back/span> at the bottom of my div, regardless of the height of my content. I want this element to always be positioned at the bottom. Therefore, I tried using position:absolute and bottom:0 ...

htmlcss

do not display entries with expired duration

update1: Unfortunately, even after testing in the sandbox, the result is still returning empty :( https://codesandbox.io/s/happy-https-u8lu2 After filtering my starsValues based on height and weight, I am able to get some results. However, I also n ...

javascripthtmlarraysreactjsredux

Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...

javascripthtmlcssvue.jsvuejs2

Guide to presenting pictures from a database using PHP

Currently, my application is able to successfully upload images by saving the file location in a MySQL database. However, I am now facing an issue when trying to display these uploaded images. Below is the code snippet causing problems: include ('co ...

phphtmlmysql