Fixed position navbar toggler

Hey there! I currently have a centralized navbar layout for Desktop. However, my aim is to also center it on the mobile version.
Basically, this navigation bar appears when scrolled downwards with icons like this. Therefore, I'm looking for assistance in understanding how to position the navbar toggler in the center across all instances of the website, even upon clicking it (similar to here)

I've set up a simplified Jfiddle here

Alternatively, you can review the code below:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<style>
    body {
        background-color: lightblue;
        margin-top: 100px;
        color: black;
    }

    .center {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .navbar-collapse {
        -ms-flex-pack:center!important;
        -webkit-justify-content: center!important;
        justify-content:center!important;
    }

    .fa {
        font-size: 2.5rem;
    }

    .sticky {
        position: fixed;
        top: 0;
        font-weight: 500;
        width: 100%;
        z-index: 1000;
        padding: .5rem;
    }
</style>

<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light cl-effect-10">
    <div class="container">
        <a class="navbar-brand" href="#" id="logo">
            <i class="fa fa-copyright" aria-hidden="true"></i>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#center-nav" aria-controls="center-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="center-nav">
            <ul class="navbar-nav center">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 5</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 6</a>
                </li>
            </ul>
        </div>
        <div class="d-flex">
            <a href="#" target="_blank" id="fb"><i class="fa fa-facebook-official" title="Facebook"></i></a>
            <a href="#" target="_blank" id="ig"><i class="fa fa-instagram" title="Instagram"></i></a>
        </div>
    </div>
</nav>

Your advice or suggestions would be greatly appreciated. Thank you!

htmlcsstwitter-bootstrap

Answer №1

Your coding style may need some tidying up, however, you can experiment with the position attribute in the following way:

.navbar-toggler {
  position: relative;
  left: 1px;
  right: 1px;
  margin: 0 auto;
}

Answer №2

Make sure to adjust the margin-left: 0% property for the navbar-toggler class...... by doing this, your code will be optimized in every aspect... here is how your updated code should appear.

body {
  background-color: lightblue;
  margin-top: 100px;
  color: black;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.navbar-collapse {
  -webkit-justify-content: center !important;
  justify-content: center !important;
}

.navbar-toggler {
  margin-left: 0%;
}

.fa {
  font-size: 2.5rem;
}

.sticky {
  position: fixed;
  top: 0;
  font-weight: 500;
  width: 100%;
  z-index: 1000;
  padding: .5rem;
}
<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>

<body>

  <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light cl-effect-10">
    <div class="container">
      <a class="navbar-brand" href="#" id="logo">
        <i class="fa fa-copyright" aria-hidden="true"></i>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#center-nav" aria-controls="center-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="center-nav">
        <ul class="navbar-nav center">
          <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 5</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 6</a>
          </li>
        </ul>
      </div>
      <div class="d-flex">
        <a href="#" target="_blank" id="fb"><i class="fa fa-facebook-official" title="Facebook"></i></a>
        <a href="#" target="_blank" id="ig"><i class="fa fa-instagram" title="Instagram"></i></a>
      </div>
    </div>
  </nav>

  <!-- random words to fill the page -->
  <p>
    rush unusual mundane moor uttermost glow smelly test fowl perform sea ignore houses berry release tangy burst ball quixotic typical nod aberrant love daily miscreant grumpy scarecrow sparkle death shy fairies tickle list sin absorbing fluttering discussion
    pocket rough odd stiff confess disastrous hydrant unpack staking risk enter cuddly bawdy jobless repair elfin closed quizzical wander maniacal earthquake deadpan makeshift preach self wonder breezy unfasten week visit achiever mate bored flock instruct
    connection cure adorable permissible type calm zoom tow weigh premium attach cute cup chess rescue choke dress telling dangerous past tail north structure icy finger obtain remain finicky blood lewd scare button cold decorate spiffy gullible cake
    punch tongue applaud awake miniature prefer imported quiet juicy dizzy crazy steep long-term icicle sprout mountain fill itch guitar clever learned rob unite pat fetch soup ill-informed well-made offer rest inject selfish support dependent bite admire
    milk energetic humorous dock discreet troubled driving stimulating zany reading divergent spiritual fertile street volleyball kittens jumbled flash natural amuse form fork keen gainful hideous thunder square educate snotty helpless anxious flaky ultra
    attend fine grass fuel bridge versed noise yielding afternoon bathe governor pinch need
  </p>
</body>

</html>

Answer №3

body {
  background-color: lightblue;
  margin-top: 100px;
  color: black;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.navbar-collapse {
  -webkit-justify-content: center !important;
  justify-content: center !important;
}

.navbar-toggler {
  margin-left: 0%;
}

.fa {
  font-size: 2.5rem;
}

.sticky {
  position: fixed;
  top: 0;
  font-weight: 500;
  width: 100%;
  z-index: 1000;
  padding: .5rem;
}
<html>

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</head>

<body>

  <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light cl-effect-10">
    <div class="container">
      <a class="navbar-brand" href="#" id="logo">
        <i class="fa fa-copyright" aria-hidden="true"></i>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#center-nav" aria-controls="center-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="center-nav">
        <ul class="navbar-nav center">
          <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 5</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link 6</a>
          </li>
        </ul>
      </div>
      <div class="d-flex">
        <a href="#" target="_blank" id="fb"><i class="fa fa-facebook-official" title="Facebook"></i></a>
        <a href="#" target="_blank" id="ig"><i class="fa fa-instagram" title="Instagram"></i></a>
      </div>
    </div>
  </nav>

  <!-- placeholder text to fill out the page -->
  <p>
    dreamy drift vibrant crystal meadow melody sunflower bubble chirp treasure breeze rainbow wonder blissfull carnival vivid twinkle galactic moonlit gentle halo radiant edge still boundless whisper ethereal harmony delicate world pauses magic portal mingle surreal
    symphony resonate cascade float tranquil mesmerize cherish flow eternity hidden beauty unique enchanting serenity wanderlust illuminate infinite twilight bloom enchanted pure restore embrace peaceful ripple starry cosmic imagining dance labyrinth silent divinity revere
    marvel mystical explore unity celestial luminous splendid mystery divine ascend nirvana timeless entwine utopia elysium awakening paradise cosmos serendepity reflection enrapture grace tranquility whimsical transcend essence nebula serenade zest glow mirror
    ethereal tale secret eternally evergreen firefly envision juniper quaint pause evolve memory solace idyllic realm flourish twilight glitter mystic horizon eternal echo sorcery promise invigorate bask opalescent pearl destiny serene sanctuary resonant soul
    kaleidoscope journey magical nurture angelic songbird sparle blossom radiate poetic mythical beckon veil wisp sublime yearning mystical oracle arcane reverie spirit vessel sigh keeper bound leap resolution azure calm
  </p>
</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

Tips for automatically closing one element when another is clicked

My goal is to create a menu that displays when I click on a link, and if another menu is already open, it should close before displaying the new one. Essentially, I want to achieve an accordion menu where only one menu is open at a time. However, despite m ...

javascriptjqueryhtml

Arranging divs parallelly while incorporating components within

Striving to create a layout with 3 divs side by side in an HTML document, my initial attempt resulted in this: https://i.stack.imgur.com/CpdLX.png However, I encountered an issue where the div would shift down whenever text or other objects were added: ...

htmlcss

Discover how to access and manipulate JSON files in an Angular application using

Currently, I am diving into learning TypeScript with Angular and I'm interested in reading a JSON file. The structure of my JSON file is as follows: { "nb": "7", "extport": "1176",, "REQ_EMAIL": ...

htmljsonangulartypescript

Insert round sphere shapes in the corners of the cells on the Table

I am working on a GUI representation table that features cells with spheres in the corner. Additionally, the footer contains a plus symbol (font-awesome icon) in the corner. I have attempted to place the sphere so that it aligns only inside the cell. Here ...

htmlcsshtml-tablecss-shapes

Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

All of the following code snippets are written in HTML: <div class="btn-toolbar text-center" role="toolbar"> <a href="#" class="btn btn-success">Link 1</a> <a href="#" class="btn btn-success">Link 11</a> < ...

ioscsswebviewsafariflexbox

Accidental delay upon mouse exit

Upon hovering over, the transition immediately begins, but there is a delay of about 300ms before the reverse transition starts upon hovering off. (https://example.com) <div id="isa-hover-gallery"> <a href="https://example-link.com"> <div ...

csscss-transitions

A guide to customizing nested elements in react using styled-components

Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...

cssreactjs

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

htmlcsscss-selectorspseudo-element

Steps for displaying innerHTML values conditionally with a pipe

Currently working with Angular 8 and looking to conditionally implement the innerHTML feature using a translation pipe. .html <button type="button" mat-flat-button // utilizing translate module internally [innerHTML] = "display ? (HIDE ...

javascripthtmlangular

Sometimes, the browser may fail to recognize a jQuery click event when a CSS3 transform is applied

There is an issue where click events are sometimes not triggered when an element contains another element being animated with CSS transitions. To see an example of this problem, check out the test case at http://codepen.io/anon/pen/gbosy In my layout, I ...

jquerycsscss-transitionsjquery-on

Is Safari causing issues with the CSS slider animation?

Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw An issue I have encountered is that the slider transitions are not functioning correctly in Safari ...

htmlcsswordpress

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

Utilizing UIWebView for dynamic HTML templating

Greetings! I am seeking to develop an HTML template (either internal or external) for the data received from an XML request. The following code has been functioning smoothly thus far: NSString* desc = [screenData.jsonVars objectForKey:@"descriptionTXT ...

iphonehtmliosuiwebview

What steps are involved in developing a quiz similar to this one?

Check out this interesting quiz: I noticed that in this quiz, when you answer a question, only that section refreshes instead of the entire page. How can I create a quiz like this? ...

javascripthtml

The appearance of the logo varies across various web pages on the site

Isn't it strange that my logo appears pixelated only on the home page, even though I used the same HTML and CSS code for all pages? The Html: <a href="Home.html"><img id="logo" src="../CONTENT/Images/Logo/1Sr2l8а.png" alt="logo"/></ ...

htmlcss

"Typescript throws a mysterious 'Undefined value' error post-assignment

I'm currently working on a task to fetch my customer's branding information based on their Id using Angular. First, I retrieve all the customer data: this.subscription = this.burstService.getBurst().subscribe(async(response) => { if (r ...

javascripthtmlangularjstypescript

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

javascriptjqueryhtml

Dynamic Dropdown Options in Angular 6 HTML Input Field

Looking to create an interactive HTML5 input field that guides the user with their input. Consider a scenario where the user is required to follow a specific grammar while entering text: rule: <expression> {<op><expression>} expression: ...

htmlangular

I am currently working on a project using ar.js

I came across a glitch code that triggers a video when scanning the marker. However, I encountered an issue where it only works on desktop. On Chrome for Android, the video does not appear, only the sound can be heard. I need assistance as my coding knowle ...

javascripthtmlthree.jsaframear.js

Determine the number of visible li elements using jQuery

Currently, I am utilizing a jQuery script to count the number of li elements in my HTML code. Here is an example of the setup: HTML: <ul class="relatedelements"> <li style="display:none;" class="1">anything</li> <li style="disp ...

jqueryhtmlcssjquery-selectorshtml-lists