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:

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

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

Unable to identify the Xpath selector for the "Account settings button" and "find my iPhone" features within iCloud

When trying to access my iCloud account settings and locate the "Find my iPhone" button on iCloud.com, I am encountering issues with my selectors. It seems like there are no frames on the page, but the Xpaths I'm using are not matching. Here are the ...

javacssseleniumxpathautomation

Plunker fails to run simple AngularJS demo

I'm having trouble figuring out why this basic example isn't functioning as expected on Plunker. http://plnkr.co/edit/EfNxzzQhAb8xAcFZGKm3?p=preview var app = angular.module("App",[]); var Controller = function($scope){ $scope.message ="Hel ...

javascriptangularjsplunker

Swap the image when hovering over it

Is it possible to modify this specific code so that a hover effect is triggered on mouseover? I attempted to look into similar questions and answers, but I found them difficult to understand. Here is the HTML snippet: <a href="RR.html"><img src ...

htmlcsshover

What is the best method to retrieve the country name from a world map using D3.js?

I'm trying to figure out how to retrieve the country name from a click event on the D3 world map. Despite inspecting the DOM, I can't quite understand how the country's name, code, or population is associated with the map. The template for ...

javascriptd3.js

A guide to organizing elements in Javascript to calculate the Cartesian product in Javascript

I encountered a situation where I have an object structured like this: [ {attributeGroupId:2, attributeId: 11, name: 'Diamond'}, {attributeGroupId:1, attributeId: 9, name: '916'}, {attributeGroupId:1, attributeId: 1, name ...

javascriptalgorithmcartesian-product

Unlock the power of AJAX in your WordPress site

I've been exploring the realm of Javascript and AJAX lately. I feel like I'm so close to getting it right, but there's something off with how I'm integrating WordPress ajax functions. I've spent a lot of time going through the docu ...

javascriptphpajaxwordpress

Transforming images with Imagick

I've been trying to generate thumbnails from PDF uploads using Imagick. I have a script that is supposed to handle this task, but unfortunately, it only uploads the file without creating a thumbnail. I know some of you may find this basic, but PHP is ...

javascriptphphtmlmysqlimagick

The process of styling with styled components in Mui - a guide to styling

Currently, I am facing challenges with styling and organization while working on a new react project with material ui and styled components. Despite researching best practices for styled components, I am still struggling to find an effective solution for s ...

javascriptreactjsmaterial-uistyled-components

Nextjs style import function properly on the development server, but faces issues when deployed to production environments

import "../styles.css"; import styles from "react-responsive-carousel/lib/styles/carousel.min.css"; import "react-owl-carousel2/lib/styles.css"; import { Provider } from "react-redux"; import store from "../store/store" function App({ Component, pageProps ...

javascriptreactjsnext.js

"Explore the versatility of React Day Picker with customizable months and weekdays_long

I have implemented the following packages: "react": "^18.2.0", "react-day-picker": "^8.1.0", and I am attempting to translate the months and days into French. However, despite passing the translated arrays to my < ...

javascriptreactjsreact-day-picker

Link the values of mongoose array to a distinct identifier

This question may come across as vague, but I'll do my best to explain it clearly. Just a heads up, I'm relatively new to working with mongoose :) So, I have this mongoose schema where different values are stored for each user: let userSchema = ...

javascriptnode.jsmongodbexpressmongoose

Struggling to utilize the filter technique in JavaScript?

Hey there, I'm facing a challenge in my JavaScript course. The exercise requires the creation of a function that filters an array to only keep strings with less than 10 characters. I've made several attempts at solving this problem, but haven&ap ...

javascriptarraysfilter

Toggle class on element based on presence of class on another element

If I have 4 boxes and the user is required to choose one. I aim to assign an active class to the box that the user clicks on. However, if the user selects another box, I want to remove the class from the first clicked box and apply it to the newly clicked ...

javascripthtmlcss

Consistent CSS alignment across all browsers

I have designed a four-digit counter that needs to be displayed in the bottom right corner of the page. Each digit is represented by a block image as a background. It is functioning properly in Chrome, but there are compatibility issues with IE7+ and Firef ...

csscross-browseralignment

What is the best way to link a newly created contact to the current user in Mongoose?

I'm faced with the challenge of creating a contact that is specifically added to the current user's contact array. Currently, my controller only creates a generic contact and doesn't cater to the individual user. Controller: function cont ...

javascriptnode.jsexpressmongoosemean-stack

Utilize the ng-controller directive with unique aliases across various sections of HTML code

I'm facing an issue with my ng-controllers when multiple controllers are used on the same page. For instance, I have one controller in the page header, another in a different section of the same page, and one in the content of the page. However, all o ...

javascripthtmlangularjsangularjs-service

What is the method for retrieving a PHP JSON variable value and displaying it in HTML?

Using the graph API, I managed to retrieve my Facebook friend list and received a JSON array as a response. The value of that array is stored in a variable like this: $json_output=($result['summary']['total_count']); echo "$json ...

javascriptphphtmljsonfacebook

Save user input data into an Excel file using PHPExcel

Could someone assist me with storing values from my form inputs to Excel using PHPExcel? I have successfully stored data from my table to Excel, but now I want to store the values from my inputs. Can anyone help me, please? Example of the form inputs: ent ...

javascriptphphtmlmysqlphpexcel

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

htmlcss

What is the purpose of including an express server instance as an argument for the http module in Node.JS?

Currently delving into the realms of Node.JS, Express.JS, and Socket.IO. The tutorials I've come across so far showcase a complex series of code to kickstart each of these modules: var express = require("express"); var app = express(); var server = ...

javascriptnode.jsexpresssocket.io