Привет всем, у меня есть панель навигации, центрированная на рабочем столе, поэтому моя цель - центрировать ее также и в мобильной версии.
В основном это моя навигация , когда я прокручиваю вниз, некоторые значки должны выглядеть как это , поэтому я хотел бы понять, как поместить переключатель навигационной панели в центр в каждом экземпляре веб-сайта , даже если я нажму на него (например, здесь )
Я создал упрощенный Jfiddle здесь
Или вы можете увидеть код:
<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>
Любая помощь или предложение будут очень признательны. Спасибо !!