Utilize Bootstrap's toggle button in the navigation bar to smoothly shift the content to the left

Recently, I encountered an issue with the navbar on my website. In the mobile version, whenever the toggle button in the navbar is clicked, it results in the website shifting to the left and causing the content to be off-center.

However, when I view the website in responsive mode using a different browser, everything seems to be properly centered and the toggle button functions as expected without any misalignment issues.

Here's a snippet of my HTML code:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>*******************</title>
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">

    <meta name="robots" content="noimageindex">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width">
  </head>

  /* The rest of the HTML code */

And this is part of my CSS code that may be relevant to the issue:

body {
    background-color: white;
    width: 100%;
    font-size: 1rem;
    z-index: 1;
}

header {
    background-color: white;
}

/* More CSS styling rules here */

If anyone has encountered a similar problem or has any suggestions on how to resolve this issue, please let me know!

cssbootstrap-5

Answer №1

Sample HTML code:

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>John Doe</title>
        <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">

        <meta name="robots" content="noindex, nofollow">
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width">
    </head>

    <body>
        <header class="fixed-top">
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                <a class="navbar-brand" href="index.php">John Doe</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About Me</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#skills">Skills</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <div class="box-profile">
            <div class="box-profile-title">
            <h1>John Doe</h1>
            <h2>PHP Web Developer</h2>
            </div>
            <div class="profile-image-container">
            <div class="personal-image-container">
                <img src="profile.jpg" class="personal-img" alt="Profile Picture" />
            </div>
            </div>
        </div>>
        <div data-bs-spy="scroll" data-bs-target="#navbar-menu" data-bs-offset="0" tabindex="0">


        <!-- The remaining content of the main section goes here -->


    </main>

        <footer>
            ...  /*the rest of the footer*/
        </footer>

    </body>
</html>

CSS styling:

body {
    background-color: white;
    width: 100%;
    font-size: 1rem;
    z-index: 1;
}

header {
    background-color: white;
}

.navbar-brand {
    font-size: 3rem;
    color: #303030;
    font-family: 'Oswald', sans-serif;
}

.navbar-brand:hover {
    color: #303030;
}

 .nav-link {
    color: #303030;
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    padding-bottom: 0.5rem;
}

.navbar-nav {
    margin-left: auto;
}

.nav-item {
    margin-right: 1rem;
    margin-left: 1rem;
    text-align: center;;
}

.nav-link:hover {
    color: #00cc99;
}

.navbar {
    background-color: white;
    height: 10rem;
}

.navbar-toggler {
    border-color: #00cc99;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 204, 153, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 767px) {
  .navbar {
    position: fixed;
    left: 0;
    right: 0;
  }
  main {
    padding-top: 60px;
  }
}

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

creating center-focused gradients in react native using LinearGradient

Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creat ...

cssreactjsreact-nativelinear-gradients

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...

javascriptjquerycssresponsive-designgeometry

Looking to showcase your logo prominently at the center of the page, flanked by two elegant

Is it possible to create a grid-like structure with dimensions 5.5-1-5.5? I would like to center a logo on the page with two lines on the left and right. (Please excuse my limited English skills) https://i.sstatic.net/cgjfS.png ...

htmltwitter-bootstrapcss

Switch the class on a specific div section

As you scroll to the top, a class named "blue" is added to the element with the ID of "div". However, when the scroll returns to the bottom, the "blue" class remains without being removed. Fiddle Link: http://jsfiddle.net/5d922roc $(window).scroll(fu ...

jquerycss

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

javascripthtmlcsssliderlerp

What steps should I take to establish an efficient folder organization system for a website utilizing HTML, CSS, and Javascript with Twitter Bootstrap?

After cloning the latest release of Twitter Bootstrap using Git with the command 'git clone git://github.com/twbs/bootstrap.git', I am in the process of creating an HTML/CSS site utilizing Bootstrap. Upon reviewing this answer on Stack Overflow ( ...

csshtmltwitter-bootstrap-3

Struggling to align your website content properly?

Currently, I am attempting to center all of the products on my Wordpress page so that everything is aligned centrally. I attempted wrapping it all in a div with specific CSS properties, but unfortunately, the content moved to the middle while the products ...

cssalignmentcenteringcenter-align

Column count pseudo class is malfunctioning on Safari browser

Why is the pseudo class with column count not working in the Safari browser? I have captured two screenshots to illustrate this issue. 1. Firefox browser screenshot https://i.sstatic.net/27uoI.png 2. Safari browser screenshot https://i.sstatic.net/vRN ...

htmlcssbrowsersafaricolumn-count

The div reveals a submenu by popping out when its overflow is set to hidden

I am trying to figure out how to create a horizontal menu with sliding option and submenu. The issue arises when I set overflow to hidden for the sliding effect, as it causes problems with the submenu. Any suggestions or ideas on how to solve this dilemma ...

javascripthtmlcssoverflow

The JQuery(document).ready function does not seem to be executing on the webpage, but it works as expected when placed in a

I have encountered a peculiar problem. It's strange to me because I can't figure out the root cause of it, despite trying everything in the Chrome Developer Tools debugger. Here is a snippet of code that works when I run it from a file on my desk ...

javascriptjquerycssgoogle-chromesingle-page-application

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

Troubleshoot: Difficulty with accessing nested tag name using getElementsByTagName

I'm currently working with a div that contains a table and its data pulled from a database. <div id="content"> <table> <tbody> <tr> <th class="header" colspan="2">Food items include:</th> </tr> ...

javascriptjqueryhtmlcsssorting

Latest versions of Bootstrap are facing issues with the functionality of the Carousel feature

I'm struggling to create a basic carousel, but for some reason, it's not functioning properly. I attempted to use the sample code provided by Bootstrap's documentation, but it doesn't behave as expected (slides won't transition and ...

javascripthtmlbootstrap-4carouselbootstrap-5

Creating a seamless top border that remains unaffected by border radius

I'm currently working on mimicking the style of Google Calendar, and I've encountered an issue with the text input box. When clicked, it should look like this: https://ibb.co/6Hqrnt4 However, what I've created ends up looking like this: htt ...

htmlcssborder

Text enhancement with text-shadow in jQuery and CSS

Before I reached out, I had been searching for a solution. In the process of building my website, I decided to incorporate text-shadow. It seemed straightforward, but turned out to be more complicated than expected. I discovered that IE does not support ...

jquerycss

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

cssajaxdjangodjango-templates

Widget remains static until job triggers data refresh, preventing CSS transition initialization

I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter ...

htmlcsssasscss-transitionsdashing

Can you find a method to retrieve the current page on a dashTable?

I am facing a challenge with my dashtable which contains over 5000 records and is paginated to load faster. However, I have noticed that when I set the page size to 5000, the loading speed decreases significantly. I have implemented a function that retriev ...

pythonhtmlcssplotly-dash

Maintaining active navigation state in JQuery/JavaScript after clicking a link: tips and tricks

While many resources discuss adding the active class to a nav link using jquery, there is less information on maintaining the active state after the nav link has been clicked. After experimenting with code from various sources, I have attempted to set ses ...

javascriptjqueryhtmlcss

Optimal Placement of CSS and index.html Files in ReactJS with Redux

Currently, my setup for the index.html file looks like this: <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Pra ...

javascripthtmlcssreactjs