When the navbar toggler icon is activated, it shifts to the left side, overlapping the logo that is originally situated on the

Currently, I am implementing a collapsible navbar feature using Bootstrap 4. The issue I'm facing is with the alignment when the screen size shrinks and the navbar toggler becomes active. While the menu items are hidden on the right side, the toggler icon appears on the left, causing an overlap with the logo placed on the same side. My goal is to keep the toggler aligned to the right.

I've experimented with setting absolute position, utilizing 'navbar-toggler-right', and exploring container layouts like 'justify-content-between'. However, none of these solutions have provided the desired outcome so far.

If you would like to review the code I've written regarding this issue, please access it through the following Codepen link: https://codepen.io/amandathedev/pen/bOrZZq

Note that all images in this project are hosted locally, hence they may not appear in the Codepen preview. Despite this, I trust it will still be clear to understand the problem related to the logo positioning.

Thank you for your assistance!

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Modern Calligraphy</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <link rel="shortcut icon" type="image/x-icon" href="logo.ico" />

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />

    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet" />

    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="grid-container">
      ...
    </div>
  </body>
</html>

CSS:

body {
  background-image: url("concrete-texture.png");
}

.grid-container {
  display: grid;
  font-family: "Raleway", sans-serif;
  ...
}
...
htmlcssbootstrap-4

Answer №1

Review your HTML structure closely. Currently, you have positioned the button above the logo in your code. While there is no need to make changes to the existing CSS in your Codepen to move the toggler to the right, a few additional styling adjustments are necessary for proper alignment.

Here's how you should rearrange the placement of the logo and button elements:

<!-- Navbar -->
        <nav class="navbar bg-transparent navbar-expand-sm">

          <img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />

          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
          </button>

Answer №2

I reorganized the HTML structure by moving the navigation button before the logo image and also disabled certain CSS properties as shown below:

.navbar-toggler {
    width: 1em;
    float: right;
    border: none;
}

.navbar-toggler-icon {
    position: fixed;
}

https://codepen.io/scheinercc/pen/MZvRaq

body {
  background-image: url("concrete-texture.png");
}

.grid-container {
  display: grid;
  font-family: "Raleway", sans-serif;
  grid-template-columns: 10em auto auto;
  grid-template-rows: 1fr 5.5fr 1fr;
  grid-gap: 1px;
  padding: 1px;
  grid-template-areas:
    "header header header header"
    "menu main main main"
    "footer footer footer footer";
}

/* .grid-item {
  border: 1px solid black;
} */

#header {
  grid-area: header;
}

/* Navbar */
.nav-link {
  display: inline-block;
  font-size: 1em;
  letter-spacing: 1px;
  text-decoration: none;
}

/*.navbar-toggler {
    width: 1em;
    float: right;
    border: none;
}

.navbar-toggler-icon {
    position: fixed;
}*/

.cool-link {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

.cool-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: black;
  transition: width 0.4s;
}

.cool-link:hover::after {
  width: 95%;
}

@media (max-width: 600px) {
  
}

#menu {
  grid-area: menu;
}

#main {
  grid-area: main;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
}

img {
  max-width: 100%;
}

.box {
  background-color: burlywood;
  padding: 10px;
}

a {
  color: #292929;
  text-decoration: none;
}

#footer {
  grid-area: footer;
  background-color: #dadada;
  border: none;
  padding: 20px;
}

#footer ul {
  display: flex;
  justify-content: flex-end;
}

#footer li {
  padding: 0 10px;
  list-style: none;
}

#footer a:hover {
  text-decoration: none;
}

#footer span {
  display: flex;
  justify-content: flex-end;
  font-size: 0.9em;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Modern Calligraphy</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link rel="shortcut icon" type="image/x-icon" href="logo.ico" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />

    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item" id="header">
        <!-- Navbar -->
        <nav class="navbar bg-transparent navbar-expand-sm">
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
          </button>
          <img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item cool-link">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item cool-link">
                <a class="nav-link" href="#">Order</a>
              </li>
              <li class="nav-item cool-link">
                <a class="nav-link" href="#">Learn</a>
              </li>
              <li class="nav-item cool-link">
                <a class="nav-link" href="#">Contact</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div class="grid-item" id="menu">Menu</div>
      <div class="grid-item" id="main">
        <div class="box">
          <img
            src="personalized.jpg"
            alt="Hand lettered calligraphy quote on paper with fruit"
          />
        </div>
        <div class="box">
          <img
            src="handLettering.jpg"
            alt="Hand lettered quote in open book on map"
          />
        </div>
        <div class="box">
          <img
            src="digital.jpg"
            alt="Digital calligraphy drawn on iPad held by woman with stylus"
          />
        </div>
        <div class="box">
          <img
            src="tutorials.jpg"
            alt="Hand lettered quote on notebook with markers"
          />
        </div>
      </div>
      <div class="grid-item" id="footer">
        <ul>
          <li>
            <a href="#"> <i class="far fa-envelope"></i> Contact</a>
          </li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Info</a></li>
        </ul>
        <span>Copyright 2018, Modern Calligraphy Inc.</span>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
      integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
      crossorigin="anonymous"
    ></script>
  </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

Mastering CSS Positioning for Navbars

Displayed below is an interesting combination of elements - an image, textbox, and a css menu image. I have managed to perfect my CSS menu. However, I am facing a challenge. I need the textbox to be centered within the navigation bar, with the image posit ...

css

The getimagesize functionality seems to be malfunctioning

I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...

phphtmlcss

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

javascriptjquerycss

What could be causing the child element in CSS to be larger than its parent element when sorting?

I am working with a UL that contains multiple LI's. Within each li, there is a table. Using mootools, I have made my li elements draggable/sortable. However, I only want a small portion of the li element (and its child table) to be draggable. I atte ...

csshovercss-positionparent

Can you explain the contrast between "#msg" and "#msg div" when used in a style tag?

<html> <head> <style> #msg { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; ...

htmlcss

Achieving Vertical Content Alignment in Bootstrap 4

I am struggling to achieve a responsive design where two columns stack vertically on top of each other when viewed on smaller mobile screens. Despite numerous attempts, I have been unable to figure it out. Ideally, I want the layout to look like this imag ...

htmlcssbootstrap-4

Prolong the Slide Duration in Slider Pro Slideshow

I am currently utilizing Slider Pro from bqworks.com for a slideshow with automated cycling on my website. I would like to adjust the display duration of each image in the slideshow. The documentation mentions a property called "slideAnimationDuration," wh ...

javascriptjqueryhtmlcssslider

Looking to implement a feature in Angular 2 where content on a page can be filtered based on a single array property of the user

Feeling lost here. I need to filter books on the page by their specific Category (Philosophy, Classic, Poetry, etc.) when a user clicks a corresponding button. However, I'm new to Angular and coding in general, so I really want to grasp this concept f ...

htmlarraysangulartypescriptfilter

How can elements be concealed in HTML using CSS if they do not have an ID or class?

Looking for a way to hide the second span element within a div that does not have an ID, but its parent div does. The goal is to target and hide the span that contains "second". <div id="example"> <div> <span>First</span> ...

htmlcss

The image shape at the bottom of the screen may disappear on certain resolutions

I've added a unique curvy shape at the bottom of the image on a bootstrap card I designed using bootstrap 5. Everything looks great on resolutions above 1400px, but on smaller screens, the shape disappears, leaving the image rectangular. I've tri ...

htmlcssbootstrap-5card

What is the best way to ensure that all Grid thumbnails have the same height?

I have a collection of image thumbnails organized in a grid format. The HTML structure uses <ul> as a wrapper and <li> elements to display each thumbnail. I have applied the following CSS properties to the <li> tag: float: none; display: ...

javascripthtmlcsstwitter-bootstrap

WindiCSS classes are not functioning properly within a Nuxt application

I've been encountering some difficulties with WindiCSS. The classes are not being applied to the elements as expected. I attempted to install an older version of Windi, but the issue persisted. I even tried switching to Tailwind instead of Windi, but ...

cssvue.jsnuxt.jstailwind-csswindicss

Creating Three-Dimensional Shapes using 2D Elements with ThreeJS

Being a newcomer to Three.js, I have been attempting to achieve the following: Imagine having an array of x and y coordinates representing a shape in the browser viewport. My goal is to use Three.js to render these shapes with an added height in the z-dir ...

javascripthtml3dthree.jswebgl

Persistent change issue with JQuery CSS function

Looking for some help with a button-bar div that I want to display only after the user clicks on a "settings" button. Currently, I have set the button-bar div to have a display:none property in my css file. However, when the settings button is clicked, t ...

javascriptjqueryhtmlcss

I am utilizing Python Django to display a message from a Python file in HTML. While the current code is functional, I would like the message to be showcased as a pop-up or alert notification

Using Python Django. The message is coming from a Python file and I would like to display it in HTML. The current code is functioning, but I would like the message to appear as a pop-up or alert. Register {% if messages %} {% for result in messages %} < ...

javascriptpythonhtmldjango

Accessing stored web pages / Browser as an interactive interface

I have a couple of questions I need help with. The first one is about how to open a saved HTML file in a browser without an internet connection. Next, I'm looking for advice on using the browser as a user interface for a desktop image viewing program ...

javascripthtmljsonbrowser

Is there a way to create a div element that allows both scrolling and dragging of the inner content?

I'm having trouble with a game board on my webpage. The board is 20x20 squares, but the container can only fit 10x10. I want to make the game board draggable so that the user can move it within the limits of the container. I tried using jQuery UI&apos ...

jquerycssdraggablescrollable

Secret icon revealing on mouseover

I devised a simple technique to showcase an element overlapping another, like an overlay, and it was functioning flawlessly until the point where I needed to incorporate a "button" (styled as a Bootstrap anchor) beneath it. Here is the initial setup and h ...

htmlcss

Exploring Text Color Verification with CSS in Selenium IDE

I am working on a project and want to ensure that my link is styled properly: <a class="title">My link</a> The CSS code used to style my link is as follows: a.title { color: #CC3333; } How can I confirm that the text "My link" is displayi ...

cssideselenium

Guide to positioning elements in CSS

I'm struggling to get all the elements to align in a single row. I've tried using display: inline-block, but it's not working as expected. I'm working with DataTables and I want the button images to be aligned with the page number box. ...

htmlcssdatatables