What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure:

.topbar-container {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #2d3e50;
  z-index: 999;
  display: flex;
  transition: height 500ms;
}

@media (min-width: 992px) {
  .topbar-container {
    height: 100px;
  }
}

@media (max-width: 991.98px) {
  .topbar-container {
    height: 80px;
  }
}

@media (min-width: 992px) {
  .navi-container {
    width: 100%;
    height: 50px;
    background-color: #01c2aa;
    position: fixed;
    top: 100px;
    z-index: 998;
    display: flex;
    justify-content: center;
    transition: top 400ms, width 400ms;
  }
  .navi-container .navi-menu {
    width: 992px;
    height: 100%;
    color: #2d3e50;
    display: inline-flex;
  }
  .navi-container .navi-menu a.navi-link {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 1.4em;
    font-weight: 600;
    padding: 10px;
  }
  .navi-container .navi-menu a.navi-link-active {
    border-bottom: 3px #2d3e50 solid;
  }
}

@media (max-width: 991.98px) {
  .navi-container {
    width: 100%;
    background-color: #01c2aa;
    position: relative;
    top: 0px;
    z-index: 998;
    display: flex;
    transition: top 500ms;
    height: 50px;
  }
  .navi-container .navi-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    position: relative;
  }
  .navi-container .navi-menu a.navi-link {
    padding: 10px;
    padding-left: 20px;
    font-size: 1.2em;
    font-weight: 600;
  }
  .navi-container .navi-menu a.navi-link-active {
    box-sizing: border-box;
    border-left: 3px #2d3e50 solid;
  }
  .navi-show-on-mobile {
    height: 100%;
  }
}

.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  top: 0px;
  position: relative;
  align-items: center;
}

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

#root {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
<div id="root">
  <div class="app-container">
    <div class="topbar-container"></div>
    <div class="navi-container navi-show-on-mobile">
      <section class="navi-menu"><a class="navi-link">DASHBOARD</a><a class="navi-link navi-link-active">COINS</a></section>
    </div>
  </div>
</div>

Upon viewing the complete webpage:

The issue lies in the alignment of the dashboard and coins navigation elements. How can this be resolved?

javascripthtmlcss

Answer №1

Make non-active items have a transparent border, and for active items, only change the border color.

.topbar-container {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #2d3e50;
  z-index: 999;
  display: flex;
  transition: height 500ms;
}

@media (min-width: 992px) {
  .topbar-container {
    height: 100px;
  }
}

@media (max-width: 991.98px) {
  .topbar-container {
    height: 80px;
  }
}

@media (min-width: 992px) {
    .navi-container {
    width: 100%;
    height: 50px;
    background-color: #01c2aa;
    position: fixed;
    top: 100px;
    z-index: 998;
    display: flex;
    justify-content: center;
    transition: top 400ms, width 400ms;
  }
  .navi-container .navi-menu {
    width: 992px;
    height: 100%;
    color: #2d3e50;
    display: inline-flex;
  }
  .navi-container .navi-menu a.navi-link {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 1.4em;
    font-weight: 600;
    padding: 10px;
    border-bottom: 3px transparent solid;
  }
  .navi-container .navi-menu a.navi-link-active {
    border-bottom-color: #2d3e50;
  }
}

@media (max-width: 991.98px) {
  .navi-container {
    width: 100%;
    background-color: #01c2aa;
    position: relative;
    top: 0px;
    z-index: 998;
    display: flex;
    transition: top 500ms;
    height: 50px;
  }
  .navi-container .navi-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    position: relative;
  }
  .navi-container .navi-menu a.navi-link {
    padding: 10px;
    padding-left: 20px;
    font-size: 1.2em;
    font-weight: 600;
  }
  .navi-container .navi-menu a.navi-link-active {
    box-sizing: border-box;
    border-left: 3px #2d3e50 solid;
  }
  .navi-show-on-mobile {
    height: 100%;
  }
}

.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  top: 0px;
  position: relative;
  align-items: center;
}

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
}

#root {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
<div id="root">
  <div class="app-container">
    <div class="topbar-container"></div>
    <div class="navi-container navi-show-on-mobile">
      <section class="navi-menu">
        <a class="navi-link">DASHBOARD</a><a class="navi-link navi-link-active">COINS</a>
      </section>
    </div>
  </div>
</div>

Answer №2

Add a 3px transparent border to 

.navi-container .navi-menu a.navi-link

.ripple {
  position: absolute;
  opacity: 0;
  border-radius: 50%;
  width: 2px;
  height: 2px;
  background-color: #ffffff;
  animation-duration: 1s;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    opacity: 0.4; }
  100% {
    transform: scale(165); } 
}

.topbar-container {
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #2d3e50;
  z-index: 999;
  display: flex;
  transition: height 500ms; }
  @media (min-width: 992px) {
    .topbar-container {
      height: 100px; } }
  @media (max-width: 991.98px) {
    .topbar-container {
      height: 80px; } }

@media (min-width: 992px) {
  .navi-container {
    width: 100%;
    height: 50px;
    background-color: #01c2aa;
    position: fixed;
    top: 100px;
    z-index: 998;
    display: flex;
    justify-content: center;
    transition: top 400ms, width 400ms; }
    .navi-container .navi-menu {
      width: 992px;
      height: 100%;
      color: #2d3e50;
      display: inline-flex; }
      .navi-container .navi-menu a.navi-link {
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        box-sizing: border-box;
        font-size: 1.4em;
        font-weight: 600;
        padding: 10px; }
      .navi-container .navi-menu a.navi-link-active {
        border-bottom: 3px #2d3e50 solid; } }

@media (max-width: 991.98px) {
  .navi-container {
    width: 100%;
    background-color: #01c2aa;
    position: relative;
    top: 0px;
    z-index: 998;
    display: flex;
    transition: top 500ms;
    height: 50px; }
    .navi-container .navi-menu {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-top: 80px;
      position: relative; }
      .navi-container .navi-menu a.navi-link {
        padding: 10px;
        padding-left: 20px;
        font-size: 1.2em;
        font-weight: 600;
        border-left: 3px solid transparent;
        }
      .navi-container .navi-menu a.navi-link-active {
        box-sizing: border-box;
        border-left: 3px #2d3e50 solid; }
  .navi-show-on-mobile {
    height: 100%; } }

.portfolio-container {
  width: 992px;
  position: absolute;
  top: 155px; }

.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  top: 0px;
  position: relative;
  align-items: center; }

* {
  padding: 0;
  margin: 0; }

html,
body {
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif; }

#root {
  box-sizing: border-box;
  height: 100%;
  width: 100%; }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Cockpit</title>

<body cz-shortcut-listen="true">
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
        <div class="app-container">
            <div class="topbar-container"></div>
            <div class="navi-container navi-show-on-mobile">
                <section class="navi-menu"><a class="navi-link">DASHBOARD</a><a class="navi-link navi-link-active">COINS</a></section>
            </div>
        </div>
    </div>
</body>

</html>

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

How is the height and width of the header determined?

When examining the theme by clicking "inspect element" on the green portion (<header> ), you will notice that the height and width properties have pixel values that change dynamically as the window is resized. So, where do these values originate fr ...

csshtmltwitter-bootstraptwitter-bootstrap-3

Get the content from a webpage, find and calculate the total count of div elements with a specific class, and display that number

Greetings everyone, I've run into a bit of a roadblock. My goal is to create a basic script that can count the number of servers currently running on this map by scraping the webpage, calculating the divs with the class ".row ark_srv1", and then displ ...

phphtmldomdocument

"Executing Javascript event onmouseUp without needing a click and hold

I've implemented an event listener for onMouseUp. I'm trying to distinguish between a quick click (short time duration) and an onMouseUp event that occurs after holding the mouse for more than one second OR with onMouseDown while moving the mous ...

javascriptjquery

What is the correct way to align my checkboxes with their corresponding labels?

I have been working with HTML to make some adjustments to a website. I recently got feedback to change the label of my checkbox, however, it is now overlapping with another checkbox. How can I resolve this issue? ...

htmlcss

Issue found in React Js test - TypeError: source.on does not exist as a function

I'm encountering an issue with my post request using multipart/form-data. Everything runs smoothly, except for the tests which are failing. When running the tests, I encounter an error message: TypeError: source.on is not a function. This is the code ...

javascriptreactjstypescriptjestjsvitest

Experimenting with parallelism using TypeScript/JS

Currently, I am tackling a TS project that involves testing concurrent code and its interactions with a database, specifically focusing on idepotency. My goal is to ensure that multiple requests modifying the same resource will either apply changes correct ...

javascripttypescripttestingconcurrency

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

javascriptjqueryhtmlcss

Here's the step-by-step process: Access the specific item in the object by referencing `obj[i]["name of desired attribute"]

I tried seeking advice and consulting multiple sources but none provided a suitable answer. Is there someone out there who can assist me? obj[i].["name of thing in object"] Here's the array: [ { "name": "DISBOARD#2760" ...

javascriptnode.jsarraysjson

Obtaining data from HTML tags using Beautifulsoup

Here is the complete HTML code that I am currently working with. Below is a simplified version of the HTML provided above: <table class="premium"> <tr class="retailer top-offer" data-pricer="47.84" saler-id=" ...

pythonhtmlparsingbeautifulsoupextract

The key to highlighting the search terms in bold format

How can I highlight the search terms entered by users in the search box? I want all keywords in every search result to be bolded. For example, when a search term is entered and the results page displays all results with the typed term in bold within each ...

phpcsssql

The component's state consistently reverts to its initial state

I am working with a component called DataGrid that has the following state: const [rows, setRows] = useState([ { id: 1, lastName: 'Snow', firstName: 'Jon', status: 'Sold'}, { id: 2, lastName: 'Lanniste ...

javascriptreactjsmaterial-ui

Loading images in advance with AJAX for enhanced AJAX performance

My website is structured in a sequential manner, where page1.html leads to page2.html and so on. I am looking to preload some images from the third page onto the second page. After searching, I came across this amazing code snippet: $.ajax({ url ...

javascriptjqueryhtmlcssajax

Typescript: Why Lines Are Not Rendering on Canvas When Using a For-Loop

What started out as a fun project to create a graphing utility quickly turned into a serious endeavor... My goal was simple - to create a line graph. Despite my efforts, attempting to use a for-loop in my TypeScript project resulted in no output. In the ...

javascriptarraystypescriptfor-loopcanvas

Show and hide the div by clicking a button

Looking at the image below, my goal is to display the div under the reply button. (The div consists of a text box and send button) https://i.stack.imgur.com/jnaV4.png The code I have currently functions correctly. However, when clicking any reply button ...

phphtmlapibootstrap-4

Tips for seamlessly embedding Youtube iframes within Angular2 components. Resolving issues with unsafe value errors

ERROR: There seems to be an issue in the ./HomeComponent class HomeComponent - inline template:23:84. It is caused by using an unsafe value in a resource URL context. About my homeData model { id: 1, title: '2017 Super Bowl', graphic: 'ht ...

javascriptangulariframeyoutube

Tips for organizing data and dynamically linking options to another select value?

One of my challenges involves working with two select elements. The first select allows for multiple options, while the second select is dependent on the choice made in the first one. <select class="form-control" id="select1"> <option value=""& ...

javascriptjquerydictionary

Steps for ensuring a promise is fulfilled in Node.js and Firebase

I've been struggling with this issue for quite some time now and can't seem to figure it out. g_globalList.once("value").then(function(tickList){ var multiPaths = []; tickList.forEach(function(ticker){ ticker.val().forEach(fu ...

javascriptnode.jsfirebasefirebase-realtime-database

Maintaining the layout of two columns in Bootstrap 4, responsive design turns them into a single stacked

Currently using Bootstrap v4 with a two-column layout that splits the container in half. On larger screens, the items in each column display correctly. However, on smaller screens, Bootstrap shuffles the items from column 2 into column 1. I am looking to ...

htmlcsstwitter-bootstrap

Utilizing the power of Material-UI with React in conjunction with Python-Django: A comprehensive

I am seeking guidance on implementing React with Material UI components in my web application. The technologies I have utilized in multiple projects include: Materialize CSS, Javascript, Jquery. The technologies I wish to explore for future projects are ...

javascriptpythondjangoreactjsmaterial-ui

What is the best way to utilize purgeCss in conjunction with other module exports?

After reading the documentation, I want to integrate purgeCss into my NextJS project. The recommended configuration in the docs suggests updating the next.config.js file like this: module.exports = withCss(withPurgeCss()) However, I am unsure where exact ...

javascriptnext.jspostcsscss-purge