How to place Image EXACTLY where I want (and responsive) within Bootstrap NavBar
0
I need to mimic the navbar in www.nielsen.com, currently my Image isn't at the top of the Navbar and I need it to be aligned with the left of the title and move depending on screen size. How do I do this?
/* Navigation */
#menu.navbar-default {
background-color: #fff;
border-color: rgba(231, 231, 231, 0);
height: 65px;
}<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
</div>
</nav>
html css twitter-bootstrap image navbar
edited Nov 20 at 2:20
Steve Cahn
846
asked Nov 19 at 23:11
Ollie Richardson
13
add a comment |
0
I need to mimic the navbar in www.nielsen.com, currently my Image isn't at the top of the Navbar and I need it to be aligned with the left of the title and move depending on screen size. How do I do this?
/* Navigation */
#menu.navbar-default {
background-color: #fff;
border-color: rgba(231, 231, 231, 0);
height: 65px;
}<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
</div>
</nav>
html css twitter-bootstrap image navbar
edited Nov 20 at 2:20
Steve Cahn
846
asked Nov 19 at 23:11
Ollie Richardson
13
add a comment |
0
0
0
I need to mimic the navbar in www.nielsen.com, currently my Image isn't at the top of the Navbar and I need it to be aligned with the left of the title and move depending on screen size. How do I do this?
/* Navigation */
#menu.navbar-default {
background-color: #fff;
border-color: rgba(231, 231, 231, 0);
height: 65px;
}<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
</div>
</nav>
html css twitter-bootstrap image navbar
edited Nov 20 at 2:20
Steve Cahn
846
asked Nov 19 at 23:11
Ollie Richardson
13
I need to mimic the navbar in www.nielsen.com, currently my Image isn't at the top of the Navbar and I need it to be aligned with the left of the title and move depending on screen size. How do I do this?
/* Navigation */
#menu.navbar-default {
background-color: #fff;
border-color: rgba(231, 231, 231, 0);
height: 65px;
}<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
</div>
</nav>
/* Navigation */
#menu.navbar-default {
background-color: #fff;
border-color: rgba(231, 231, 231, 0);
height: 65px;
}<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
</div>
</nav>/* Navigation */
#menu.navbar-default {
background-color: #fff;
border-color: rgba(231, 231, 231, 0);
height: 65px;
}<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="https://i.stack.imgur.com/fKSTL.png" width="45" height="65" alt="Nielsen"> </a> </div>
</div>
</nav>html css twitter-bootstrap image navbar
html css twitter-bootstrap image navbar
edited Nov 20 at 2:20
Steve Cahn
846
asked Nov 19 at 23:11
Ollie Richardson
13
edited Nov 20 at 2:20
Steve Cahn
846
asked Nov 19 at 23:11
Ollie Richardson
13
edited Nov 20 at 2:20
Steve Cahn
846
edited Nov 20 at 2:20
Steve Cahn
846
edited Nov 20 at 2:20
Steve Cahn
846
846
asked Nov 19 at 23:11
Ollie Richardson
13
asked Nov 19 at 23:11
Ollie Richardson
13
asked Nov 19 at 23:11
Ollie Richardson
13
13
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
For your image, understand and add the following CSS:
position: absolute;
left: 50%;
transform: translateX(-50%);
For your background image, understand and add the following CSS:
background: url(...) center;
background-size: 1000px;
answered Nov 19 at 23:22
Chris Happy
4,5231833
Beyond this, I would need to see your problem, either with a link to your website or a demo of your problem on JSfiddle, CodePen, or a more detailed snippet.
– Chris Happy
Nov 19 at 23:22
This doesnt do anything apart from put the image in the middle of my nav bar, its still not at the top.
– Ollie Richardson
Nov 20 at 1:42
Its bootstrap based I cant do a codepen can I?
– Ollie Richardson
Nov 20 at 1:45
@OllieRichardson For a CodePen, add your<script src="...">and<link href="">to the top of the html.
– Chris Happy
Nov 20 at 2:02
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%2f53383964%2fhow-to-place-image-exactly-where-i-want-and-responsive-within-bootstrap-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
For your image, understand and add the following CSS:
position: absolute;
left: 50%;
transform: translateX(-50%);
For your background image, understand and add the following CSS:
background: url(...) center;
background-size: 1000px;
answered Nov 19 at 23:22
Chris Happy
4,5231833
Beyond this, I would need to see your problem, either with a link to your website or a demo of your problem on JSfiddle, CodePen, or a more detailed snippet.
– Chris Happy
Nov 19 at 23:22
This doesnt do anything apart from put the image in the middle of my nav bar, its still not at the top.
– Ollie Richardson
Nov 20 at 1:42
Its bootstrap based I cant do a codepen can I?
– Ollie Richardson
Nov 20 at 1:45
@OllieRichardson For a CodePen, add your<script src="...">and<link href="">to the top of the html.
– Chris Happy
Nov 20 at 2:02
add a comment |
0
For your image, understand and add the following CSS:
position: absolute;
left: 50%;
transform: translateX(-50%);
For your background image, understand and add the following CSS:
background: url(...) center;
background-size: 1000px;
answered Nov 19 at 23:22
Chris Happy
4,5231833
Beyond this, I would need to see your problem, either with a link to your website or a demo of your problem on JSfiddle, CodePen, or a more detailed snippet.
– Chris Happy
Nov 19 at 23:22
This doesnt do anything apart from put the image in the middle of my nav bar, its still not at the top.
– Ollie Richardson
Nov 20 at 1:42
Its bootstrap based I cant do a codepen can I?
– Ollie Richardson
Nov 20 at 1:45
@OllieRichardson For a CodePen, add your<script src="...">and<link href="">to the top of the html.
– Chris Happy
Nov 20 at 2:02
add a comment |
0
0
0
For your image, understand and add the following CSS:
position: absolute;
left: 50%;
transform: translateX(-50%);
For your background image, understand and add the following CSS:
background: url(...) center;
background-size: 1000px;
answered Nov 19 at 23:22
Chris Happy
4,5231833
For your image, understand and add the following CSS:
position: absolute;
left: 50%;
transform: translateX(-50%);
For your background image, understand and add the following CSS:
background: url(...) center;
background-size: 1000px;
answered Nov 19 at 23:22
Chris Happy
4,5231833
answered Nov 19 at 23:22
Chris Happy
4,5231833
answered Nov 19 at 23:22
Chris Happy
4,5231833
answered Nov 19 at 23:22
Chris Happy
4,5231833
4,5231833
Beyond this, I would need to see your problem, either with a link to your website or a demo of your problem on JSfiddle, CodePen, or a more detailed snippet.
– Chris Happy
Nov 19 at 23:22
This doesnt do anything apart from put the image in the middle of my nav bar, its still not at the top.
– Ollie Richardson
Nov 20 at 1:42
Its bootstrap based I cant do a codepen can I?
– Ollie Richardson
Nov 20 at 1:45
@OllieRichardson For a CodePen, add your<script src="...">and<link href="">to the top of the html.
– Chris Happy
Nov 20 at 2:02
add a comment |
Beyond this, I would need to see your problem, either with a link to your website or a demo of your problem on JSfiddle, CodePen, or a more detailed snippet.
– Chris Happy
Nov 19 at 23:22
This doesnt do anything apart from put the image in the middle of my nav bar, its still not at the top.
– Ollie Richardson
Nov 20 at 1:42
Its bootstrap based I cant do a codepen can I?
– Ollie Richardson
Nov 20 at 1:45
@OllieRichardson For a CodePen, add your<script src="...">and<link href="">to the top of the html.
– Chris Happy
Nov 20 at 2:02
Beyond this, I would need to see your problem, either with a link to your website or a demo of your problem on JSfiddle, CodePen, or a more detailed snippet.
– Chris Happy
Nov 19 at 23:22
Beyond this, I would need to see your problem, either with a link to your website or a demo of your problem on JSfiddle, CodePen, or a more detailed snippet.
– Chris Happy
Nov 19 at 23:22
This doesnt do anything apart from put the image in the middle of my nav bar, its still not at the top.
– Ollie Richardson
Nov 20 at 1:42
This doesnt do anything apart from put the image in the middle of my nav bar, its still not at the top.
– Ollie Richardson
Nov 20 at 1:42
Its bootstrap based I cant do a codepen can I?
– Ollie Richardson
Nov 20 at 1:45
Its bootstrap based I cant do a codepen can I?
– Ollie Richardson
Nov 20 at 1:45
@OllieRichardson For a CodePen, add your
<script src="..."> and <link href=""> to the top of the html.– Chris Happy
Nov 20 at 2:02
@OllieRichardson For a CodePen, add your
<script src="..."> and <link href=""> to the top of the html.– Chris Happy
Nov 20 at 2:02
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53383964%2fhow-to-place-image-exactly-where-i-want-and-responsive-within-bootstrap-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
