The close button is not located in its correct position

Currently, I am facing an issue while attempting to change the navbar icon into a close symbol when it is open. Despite my efforts, the display is not optimal and I need the icon to be positioned next to the MENU text. To achieve this, I have applied CSS styling for the close icon by utilizing three spans for the horizontal bars. The approach involves hiding the middle bar and rotating the first and third bars to transform them into a close symbol. However, the positioning is incorrect. Even when setting the display value of .navbar-toggler span to block, the appearance is still unsatisfactory but at least all three bars are visible. How can I adjust the size of navbar-toggler to ensure that the Menu text and icon align properly side by side? Additionally, how can I prevent the icons from shifting out of place? My goal is to maintain the icon in the same position both before and after collapsing the navigation menu.

.navbar {
border-top: 2px solid #C66FF4;
width: 100%
}

@media (min-width: 768px) {
    nav .navbar .navbar-custom {
        background: rgba(0,0,0,0);
    }
  }

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: 0;
}
... (remaining code omitted for brevity)


<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
... (remaining code omitted for brevity)

cssbootstrap-4

Answer №1

Is this the style you are looking for? Edit: Updated

.navbar {
  border-top: 2px solid #C66FF4;
  width: 100%
}

.navbar-toggler {
  display: inline-block;
}

.menuIcon {
  float: right;
  display: block;
  position: relative;
}

.menuText {
  display: block;
  float: left;
  margin-right: 10px;
  line-height: 25px;
}

@media (min-width: 768px) {
  nav .navbar .navbar-custom {
    background: rgba(0, 0, 0, 0);
  }
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: 0;
}

.navbar-toggler span {
  display: block;
  background-color: #fff;
  height: 3px;
  width: 25px;
  margin-top: 4px;
  margin-bottom: 4px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  position: relative;
  left: 0;
  opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
  -webkit-transition: transform .35s ease-in-out;
  -moz-transition: transform .35s ease-in-out;
  -o-transition: transform .35s ease-in-out;
  transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  position: absolute;
  right: 25px;
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  height: 12px;
  visibility: hidden;
  background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  position: absolute;
  right: 25px;
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 0.9;
}

.bg-dark {
  background-color: #343a40;
}

@media only screen and (min-width: 768px) {
  nav.bg-dark {
    background-color: white !important;
  }
  .navbar-dark .navbar-nav .nav-link {
    background: none;
    border: 0;
    bottom: auto;
    box-sizing: border-box;
    color: #666 !important;
    font-family: Poppins;
    font-size: 12px;
    height: auto;
    left: auto;
    line-height: 1;
    margin: 0;
    min-height: auto;
    max-height: none;
    opacity: 1;
    outline: none;
    overflow: visible;
    position: relative;
    text-align: center !important;
    text-decoration: none;
  }
}

nav.navbar-dark {
  border-top: 2px solid #343a40;
  border-bottom: 2px solid #343a40;
  width: 100%;
}
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-custom">
  <!--Brand in navigation menu-->
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
  <div class="menuIcon">
  <span> </span>
    <span> </span>
    <span> </span>
    </div>
    <div class="menuText">Menu</div>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav">

      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
    </ul>

  </div>
</nav>

</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

Arrange the divs alongside one another within a container and ensure that the container adjusts its width to fit the children

I am in need of a container div: This div should adjust its width based on the content within. I would like the child elements to align horizontally. The container itself should form a single horizontal line. I prefer not to use flex because it tends to ...

cssreactjs

jQuery.addClass function not functioning correctly

I am encountering an issue where the functionality in this code snippet isn't quite working as expected. Specifically, I would like the 'huh' div to become opaque when the menu is hovered over. While attempting to achieve this with fadein/ou ...

jqueryhtmlcss

Difficulty with setting a border for text spanning multiple lines

I am trying to style a header text with a border around it. The issue arises when the larger text spans over two lines, causing the border to break in between. In an attempt to fix this, I applied the CSS property box-decoration-break: clone;. However, thi ...

htmlcsstext

How can I customize the color of the check mark symbol in a bootstrap checkbox?

Here is my customized HTML code using Bootstrap: <div class="col-lg-4 col-12 text-center"> <div style="width: 80%; margin: auto"> <ul class="list-group"> {% for sl in my_list %} <li ...

htmlcsscheckboxcolorsbootstrap-5

Expanding beyond the dimensions of the webpage, HTML CSS Height set to 100% creates a unique

I'm struggling with the CSS on a page I'm working on. I have a header and main content each enclosed in div tags, with the header set to a height of 250px and the main content set to a height of 100%. I've also set the html and body heights ...

htmlcss

issues with responsive mobile navigation

Greetings! I've been diligently working on a website project for a client, but I have a nagging feeling that I may have overlooked something important. If you'd like to take a look at the small design mockup preview I'm providing for the cl ...

javascripthtmlcssbootstrap-4responsive-design

Unforeseen issues arise when working with CSS selectors

Exploring CSS with a series of buttons and encountering some unusual behavior. Here's the code: https://codepen.io/buoyantair/pen/JNgqXG?editors=1100 Let me share the snippets for Pug Script and Sass file: Pug Script header.row .col ...

htmlcsssasscss-selectorspug

Is there a way to align these images vertically on a smaller device screen?

I am attempting to arrange these images vertically on a smaller screen, displaying them in one column instead of two. https://i.sstatic.net/B0aTJ.png Below is the code I currently have: <div class="container"> <div class="ro ...

cssbootstrap-5

When hovering over a single list item, only the top border will be displayed without affecting the

Check out the live link provided below: I am attempting to add a border and later an arrow in the middle on hover in the menu. However, the current code places a border over the entire menu, with individual list items on top of that. #menu ul li { margin ...

cssmenuhover

Resolving CSS Conflict in Panels with Legacy Bootstrap

I have recently implemented Panels from Bootstrap 3 with the older version of Twitter-Bootstrap. My challenge lies in adding the well class to the panel body, as it results in excessive padding. This was not an issue when using BS3, leading me to believe ...

csstwitter-bootstrap

Is there a way for me to conceal my table upon clicking on the sidebar? Additionally, when I click on a button to display a different table, can the currently visible table automatically close?

I have a unique table for each button. Initially, the tables are hidden using CSS visibility: 'hidden', and when I click a button, the corresponding table displays. However, the issue arises when I click the same button again as it fails to hide ...

javascripthtmljquerycssshow-hide

Just starting out with JavaScript - updating the appearance of an element

Based on the value of a boolean, I am looking to control the visibility of specific tabs in my sidebar when the page loads. var someVar = true; function show_ifTrue() { if (Boolean(someVar) == true) { document.getElementById('x'). ...

javascripthtmlcss

Having issues with Angular Material, specifically with mat-list-item and routerLinkActive not functioning as expected

Currently, I am working with a navigation view that utilizes the MatSidenavModule. The issue I am encountering is on mobile screens. When I click a mat-list-item, the mat-sidenav closes as expected. However, upon opening the mat-sidenav again, Material alw ...

javascriptcssangularangular-material

Issue with loading background image in HTML/CSS is being caused by a Cross-Origin Read Blocking problem

As part of my project, I need to load an image from my image hosting site by using my github repository. The CSS code I am using for this task is as follows: #main-section{ background-image : url("https://github.com/<mypath>/myphoto.jpg"); } Be ...

htmlcss

Several components utilizing a popup module

I have created a modal popup example where scrolling is disabled in the background but enabled within the pop-up itself. Check out my demo here: View Demo My challenge lies in implementing a grid of images on the website: Take a look at the type of grid ...

javascriptjquerycsshtml

Is the Owl carousel Auto Play feature malfunctioning when hovered over?

I seem to be encountering an issue with the auto play functionality of the owl carousel. I have uploaded and included all the necessary files, and it is functioning properly when initially loaded. The auto play feature works perfectly, but when I hover ove ...

jqueryhtmlcssowl-carousel

Why is the navbar toggle malfunctioning despite having all necessary dependencies in Angular?

Recently, I've been tackling the challenge of implementing a Navbar with collapse menu and dropdown links using Bootstrap 4 and Angular 6. However, I've hit a roadblock as the Navbar is not functioning as expected. Although the elements seem to r ...

angularbootstrap-4

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

javascripthtmljquerycss

Adjust the dimensions of the icon

My current project involves creating a sidebar with icons and associated text to represent each icon. However, I encountered an issue while trying to adjust the size of the icons within the sidebar using the "useStyles()" method. For some reason, the size ...

cssreactjsmaterial-ui

A guide on centering two elements vertically within a single table cell

I am facing an issue with a table that has 5 columns, all vertically aligned to the middle. The first 4 columns contain text that is properly aligned in the middle of the cell. However, the last column is a bit different as it consists of two divs. The fir ...

htmlcss