Navbar toggler in fixed position

Question

Hello everyone I have a navbar centered on Desktop so my goal is to center it also in mobile version.
Basically this is my nav , when I scroll down some icons have to appear like this so I'd like to understand how to put the navbar toggler in the center in every instance of the website , even if I click on it (like here )

I created a simplified Jfiddle here

Or you can see the code:

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

<!-- random words to fill the page -->
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 town star industrious competition jumpy tin chalk back frequent new launch dirt stretch nifty gratis trace old gather unadvised petite flag bead disgusting scintillating spooky stupendous sail ice messy impress boring action question useless dogs perpetual spicy care pipe pass calculating tall ignorant mean chivalrous classy zephyr romantic late jeans snobbish stereotyped hum screeching close frighten marry texture sincere war pricey foregoing wobble itchy communicate filthy wish talk flight suspect cool reflect soda scent cautious edge stormy furniture stale relieved wanting tap clover pretend amount overwrought toothpaste vengeful wave five hungry shake doubt protect 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 town star industrious competition jumpy tin chalk back frequent new launch dirt stretch nifty gratis trace old gather unadvised petite flag bead disgusting scintillating spooky stupendous sail ice messy impress boring action question useless dogs perpetual spicy care pipe pass calculating tall ignorant mean chivalrous classy zephyr romantic late jeans snobbish stereotyped hum screeching close frighten marry texture sincere war pricey foregoing wobble itchy communicate filthy wish talk flight suspect cool reflect soda scent cautious edge stormy furniture stale relieved wanting tap clover pretend amount overwrought toothpaste vengeful wave five hungry shake doubt protect 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 town star industrious competition jumpy tin chalk back frequent new launch dirt stretch nifty gratis trace old gather unadvised petite flag bead disgusting scintillating spooky stupendous sail ice messy impress boring action question useless dogs perpetual spicy care pipe pass calculating tall ignorant mean chivalrous classy zephyr romantic late jeans snobbish stereotyped hum screeching close frighten marry texture sincere war pricey foregoing wobble itchy communicate filthy wish talk flight suspect cool reflect soda scent cautious edge stormy furniture stale relieved wanting tap clover pretend amount overwrought toothpaste vengeful wave five hungry shake doubt protect 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 town star industrious competition jumpy tin chalk back frequent new launch dirt stretch nifty gratis trace old gather unadvised petite flag bead disgusting scintillating spooky stupendous sail ice messy impress boring action question useless dogs perpetual spicy care pipe pass calculating tall ignorant mean chivalrous classy zephyr romantic late jeans snobbish stereotyped hum screeching close frighten marry texture sincere war pricey foregoing wobble itchy communicate filthy wish talk flight suspect cool reflect soda scent cautious edge stormy furniture stale relieved wanting tap clover pretend amount overwrought toothpaste vengeful wave five hungry shake doubt protect




<script>
    $(window).ready(function() {
        $('#logo').hide();
        $('#fb').hide();
        $('#ig').hide();
        $(window).scroll(function () {
            if ($(window).scrollTop() > 150) {
                $('.navbar').addClass('sticky');
                $('#logo').fadeIn("300");
                $('#fb').fadeIn("300");
                $('#ig').fadeIn("300");
            } else {
                $('.navbar').removeClass('sticky');
                $('#logo').fadeOut("fast");
                $('#fb').fadeOut("fast");
                $('#ig').fadeOut("fast");
            }
        });
    });
</script>

Any help or suggestion would be very appreciated. Thanks!!

Answer 1

you can simply set the margin-left: 0% to class navbar-toggler ..... then it will be fine in all means... now your code should look like this.

 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 2

your code is a bit messy but you can play with position something like this:

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

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