How to move items around in the bootstrap fixed navbarHow to move an element into another element?How to make Twitter Bootstrap menu dropdown on hover rather than clickChange navbar color in Twitter BootstrapHow can I make Bootstrap columns all the same height?Change Navbar breakpoint in Bootstrap 3.3.2Cannot display HTML stringBootstrap navbar collapse not styled correctlyBootstrap 4 Navbar align rightHow to correctly adjust the position of the menu items in the fixed-top nav bar?
Is it possible that Curiosity measured its own methane or failed doing the spectrometry?
What is the name of the technique when an element is repeated at different scales?
What's the difference between a type and a kind?
How can I effectively map a multi-level dungeon?
Machine Learning Golf: Multiplication
Has chattel slavery ever been used as a criminal punishment in the USA since the passage of the Thirteenth Amendment?
Can a Time Lord survive with just one heart?
Why did moving the mouse cursor cause Windows 95 to run more quickly?
Do I need to be legally qualified to install a Hive smart thermostat?
How serious is plagiarism in a master’s thesis?
Isn't "Dave's protocol" good if only the database, and not the code, is leaked?
Should I increase my 401(k) contributions, or increase my mortgage payments
How to travel between two stationary worlds in the least amount of time? (time dilation)
What is the addition in the re-released version of Avengers: Endgame?
Is it bad to suddenly introduce another element to your fantasy world a good ways into the story?
Platform Event Design when Subscribers are Apex Triggers
Creating patterns
Why no parachutes in the Orion AA2 abort test?
In the Seventh Seal why does Death let the chess game happen?
How to supply water to a coastal desert town with no rain and no freshwater aquifers?
Recursive conversion from ExpandoObject to Dictionary<string, object>
Why does mean tend be more stable in different samples than median?
What happens if the limit of 4 billion files was exceeded in an ext4 partition?
Has there ever been a cold war other than between the U.S. and the U.S.S.R.?
How to move items around in the bootstrap fixed navbar
How to move an element into another element?How to make Twitter Bootstrap menu dropdown on hover rather than clickChange navbar color in Twitter BootstrapHow can I make Bootstrap columns all the same height?Change Navbar breakpoint in Bootstrap 3.3.2Cannot display HTML stringBootstrap navbar collapse not styled correctlyBootstrap 4 Navbar align rightHow to correctly adjust the position of the menu items in the fixed-top nav bar?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
1
I'm trying to created a fixed-top navbar using Bootstrap 4 however I'm having a very difficult time trying to align the LOGO and MENU items to my liking.
I understand there is ml-auto, mr-auto however, is it possible for me to add pixels to it so I move it exactly how I want to?
This is what my navbar looks like:
I am hoping to move the LOGO and the MENU items towards the middle of the screen. maybe start with padding of 100px from right and left, so LOGO and MENU are closer together. Here is my code:
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
html css twitter-bootstrap
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
add a comment |
1
I'm trying to created a fixed-top navbar using Bootstrap 4 however I'm having a very difficult time trying to align the LOGO and MENU items to my liking.
I understand there is ml-auto, mr-auto however, is it possible for me to add pixels to it so I move it exactly how I want to?
This is what my navbar looks like:
I am hoping to move the LOGO and the MENU items towards the middle of the screen. maybe start with padding of 100px from right and left, so LOGO and MENU are closer together. Here is my code:
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
html css twitter-bootstrap
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
Can't you just give yournavan id and write a style for that?#main-nav padding 0 100px;. Not everything has to be Bootstrap classes, you can write your own styles too
– zgood
Mar 25 at 19:19
but if I do that, then for example in mobile version the padding is there. THE menu is fine, the logo stays with 100px padding @zgood
– Koosh
Mar 25 at 19:20
Then write a@mediaquery style for mobile that reduces it, or use a unit other thanpxlike%
– zgood
Mar 25 at 19:20
@zgood I added padding inline like this: <a id="navbarLogo" class="navbar-brand" href="#" style="padding-left:200px;"><img id="LOGO" src="images/MainLogo.png" style="width:250px; margin-top:-10px; margin-bottom:-10px;"/></a> however, in my media query doing this doesn't do anything: media only screen and (max-width: 600px) #navbarLogo padding-left:0 !important;
– Koosh
Mar 25 at 19:26
i obviously have @mediaQuery i just couldn't have 2 of those symbols in a comment
– Koosh
Mar 25 at 19:26
add a comment |
1
1
1
I'm trying to created a fixed-top navbar using Bootstrap 4 however I'm having a very difficult time trying to align the LOGO and MENU items to my liking.
I understand there is ml-auto, mr-auto however, is it possible for me to add pixels to it so I move it exactly how I want to?
This is what my navbar looks like:
I am hoping to move the LOGO and the MENU items towards the middle of the screen. maybe start with padding of 100px from right and left, so LOGO and MENU are closer together. Here is my code:
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
html css twitter-bootstrap
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
I'm trying to created a fixed-top navbar using Bootstrap 4 however I'm having a very difficult time trying to align the LOGO and MENU items to my liking.
I understand there is ml-auto, mr-auto however, is it possible for me to add pixels to it so I move it exactly how I want to?
This is what my navbar looks like:
I am hoping to move the LOGO and the MENU items towards the middle of the screen. maybe start with padding of 100px from right and left, so LOGO and MENU are closer together. Here is my code:
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
html css twitter-bootstrap
html css twitter-bootstrap
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
asked Mar 25 at 19:10
KooshKoosh
3592 silver badges11 bronze badges
3592 silver badges11 bronze badges
Can't you just give yournavan id and write a style for that?#main-nav padding 0 100px;. Not everything has to be Bootstrap classes, you can write your own styles too
– zgood
Mar 25 at 19:19
but if I do that, then for example in mobile version the padding is there. THE menu is fine, the logo stays with 100px padding @zgood
– Koosh
Mar 25 at 19:20
Then write a@mediaquery style for mobile that reduces it, or use a unit other thanpxlike%
– zgood
Mar 25 at 19:20
@zgood I added padding inline like this: <a id="navbarLogo" class="navbar-brand" href="#" style="padding-left:200px;"><img id="LOGO" src="images/MainLogo.png" style="width:250px; margin-top:-10px; margin-bottom:-10px;"/></a> however, in my media query doing this doesn't do anything: media only screen and (max-width: 600px) #navbarLogo padding-left:0 !important;
– Koosh
Mar 25 at 19:26
i obviously have @mediaQuery i just couldn't have 2 of those symbols in a comment
– Koosh
Mar 25 at 19:26
add a comment |
Can't you just give yournavan id and write a style for that?#main-nav padding 0 100px;. Not everything has to be Bootstrap classes, you can write your own styles too
– zgood
Mar 25 at 19:19
but if I do that, then for example in mobile version the padding is there. THE menu is fine, the logo stays with 100px padding @zgood
– Koosh
Mar 25 at 19:20
Then write a@mediaquery style for mobile that reduces it, or use a unit other thanpxlike%
– zgood
Mar 25 at 19:20
@zgood I added padding inline like this: <a id="navbarLogo" class="navbar-brand" href="#" style="padding-left:200px;"><img id="LOGO" src="images/MainLogo.png" style="width:250px; margin-top:-10px; margin-bottom:-10px;"/></a> however, in my media query doing this doesn't do anything: media only screen and (max-width: 600px) #navbarLogo padding-left:0 !important;
– Koosh
Mar 25 at 19:26
i obviously have @mediaQuery i just couldn't have 2 of those symbols in a comment
– Koosh
Mar 25 at 19:26
Can't you just give your
nav an id and write a style for that? #main-nav padding 0 100px; . Not everything has to be Bootstrap classes, you can write your own styles too– zgood
Mar 25 at 19:19
Can't you just give your
nav an id and write a style for that? #main-nav padding 0 100px; . Not everything has to be Bootstrap classes, you can write your own styles too– zgood
Mar 25 at 19:19
but if I do that, then for example in mobile version the padding is there. THE menu is fine, the logo stays with 100px padding @zgood
– Koosh
Mar 25 at 19:20
but if I do that, then for example in mobile version the padding is there. THE menu is fine, the logo stays with 100px padding @zgood
– Koosh
Mar 25 at 19:20
Then write a
@media query style for mobile that reduces it, or use a unit other than px like %– zgood
Mar 25 at 19:20
Then write a
@media query style for mobile that reduces it, or use a unit other than px like %– zgood
Mar 25 at 19:20
@zgood I added padding inline like this: <a id="navbarLogo" class="navbar-brand" href="#" style="padding-left:200px;"><img id="LOGO" src="images/MainLogo.png" style="width:250px; margin-top:-10px; margin-bottom:-10px;"/></a> however, in my media query doing this doesn't do anything: media only screen and (max-width: 600px) #navbarLogo padding-left:0 !important;
– Koosh
Mar 25 at 19:26
@zgood I added padding inline like this: <a id="navbarLogo" class="navbar-brand" href="#" style="padding-left:200px;"><img id="LOGO" src="images/MainLogo.png" style="width:250px; margin-top:-10px; margin-bottom:-10px;"/></a> however, in my media query doing this doesn't do anything: media only screen and (max-width: 600px) #navbarLogo padding-left:0 !important;
– Koosh
Mar 25 at 19:26
i obviously have @mediaQuery i just couldn't have 2 of those symbols in a comment
– Koosh
Mar 25 at 19:26
i obviously have @mediaQuery i just couldn't have 2 of those symbols in a comment
– Koosh
Mar 25 at 19:26
add a comment |
1 Answer
1
active
oldest
votes
0
You can add padding to the main .navbar element. Then control the spacing using media queries.
.navbar
padding: 0.5em 100px !important;
@media only screen and (max-width: 768px)
.navbar
padding: 0.5em 1em !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55344899%2fhow-to-move-items-around-in-the-bootstrap-fixed-navbar%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can add padding to the main .navbar element. Then control the spacing using media queries.
.navbar
padding: 0.5em 100px !important;
@media only screen and (max-width: 768px)
.navbar
padding: 0.5em 1em !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
add a comment |
0
You can add padding to the main .navbar element. Then control the spacing using media queries.
.navbar
padding: 0.5em 100px !important;
@media only screen and (max-width: 768px)
.navbar
padding: 0.5em 1em !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
add a comment |
0
0
0
You can add padding to the main .navbar element. Then control the spacing using media queries.
.navbar
padding: 0.5em 100px !important;
@media only screen and (max-width: 768px)
.navbar
padding: 0.5em 1em !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
You can add padding to the main .navbar element. Then control the spacing using media queries.
.navbar
padding: 0.5em 100px !important;
@media only screen and (max-width: 768px)
.navbar
padding: 0.5em 1em !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>.navbar
padding: 0.5em 100px !important;
@media only screen and (max-width: 768px)
.navbar
padding: 0.5em 1em !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>.navbar
padding: 0.5em 100px !important;
@media only screen and (max-width: 768px)
.navbar
padding: 0.5em 1em !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark sticky-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="navbarNavDropdown" class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
answered Mar 25 at 19:31
brooksrelytbrooksrelyt
2,2374 gold badges14 silver badges27 bronze badges
2,2374 gold badges14 silver badges27 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55344899%2fhow-to-move-items-around-in-the-bootstrap-fixed-navbar%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can't you just give your
navan id and write a style for that?#main-nav padding 0 100px;. Not everything has to be Bootstrap classes, you can write your own styles too– zgood
Mar 25 at 19:19
but if I do that, then for example in mobile version the padding is there. THE menu is fine, the logo stays with 100px padding @zgood
– Koosh
Mar 25 at 19:20
Then write a
@mediaquery style for mobile that reduces it, or use a unit other thanpxlike%– zgood
Mar 25 at 19:20
@zgood I added padding inline like this: <a id="navbarLogo" class="navbar-brand" href="#" style="padding-left:200px;"><img id="LOGO" src="images/MainLogo.png" style="width:250px; margin-top:-10px; margin-bottom:-10px;"/></a> however, in my media query doing this doesn't do anything: media only screen and (max-width: 600px) #navbarLogo padding-left:0 !important;
– Koosh
Mar 25 at 19:26
i obviously have @mediaQuery i just couldn't have 2 of those symbols in a comment
– Koosh
Mar 25 at 19:26