Assistance creating simple nav-bar.
Could someone help me. I am a beginner and I am just trying to understand how code works. I know this seems stupid but I couldn't find anyone asking this question. I found that my Navigation bar is going across my screen and that their is no margin. I tried it with it but I don't know where to add the "align" but it doesn't work. If you do answer this question color or cool effects to make this nav bar actually look good. Thank you for the help and I appreciate anyone that tries.I don't know how to add code here so please read the comments.
html alignment
asked Nov 24 '18 at 17:19
bobbob
61
add a comment |
Could someone help me. I am a beginner and I am just trying to understand how code works. I know this seems stupid but I couldn't find anyone asking this question. I found that my Navigation bar is going across my screen and that their is no margin. I tried it with it but I don't know where to add the "align" but it doesn't work. If you do answer this question color or cool effects to make this nav bar actually look good. Thank you for the help and I appreciate anyone that tries.I don't know how to add code here so please read the comments.
html alignment
asked Nov 24 '18 at 17:19
bobbob
61
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">LYJ</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> <button class="btn btn-danger navbar-btn">SURVEY</button> </div> </nav>
– bob
Nov 24 '18 at 17:38
add a comment |
Could someone help me. I am a beginner and I am just trying to understand how code works. I know this seems stupid but I couldn't find anyone asking this question. I found that my Navigation bar is going across my screen and that their is no margin. I tried it with it but I don't know where to add the "align" but it doesn't work. If you do answer this question color or cool effects to make this nav bar actually look good. Thank you for the help and I appreciate anyone that tries.I don't know how to add code here so please read the comments.
html alignment
asked Nov 24 '18 at 17:19
bobbob
61
Could someone help me. I am a beginner and I am just trying to understand how code works. I know this seems stupid but I couldn't find anyone asking this question. I found that my Navigation bar is going across my screen and that their is no margin. I tried it with it but I don't know where to add the "align" but it doesn't work. If you do answer this question color or cool effects to make this nav bar actually look good. Thank you for the help and I appreciate anyone that tries.I don't know how to add code here so please read the comments.
html alignment
html alignment
asked Nov 24 '18 at 17:19
bobbob
61
asked Nov 24 '18 at 17:19
bobbob
61
asked Nov 24 '18 at 17:19
bobbob
61
asked Nov 24 '18 at 17:19
bobbob
61
asked Nov 24 '18 at 17:19
bobbob
61
61
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">LYJ</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> <button class="btn btn-danger navbar-btn">SURVEY</button> </div> </nav>
– bob
Nov 24 '18 at 17:38
add a comment |
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">LYJ</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> <button class="btn btn-danger navbar-btn">SURVEY</button> </div> </nav>
– bob
Nov 24 '18 at 17:38
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">LYJ</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> <button class="btn btn-danger navbar-btn">SURVEY</button> </div> </nav>
– bob
Nov 24 '18 at 17:38
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">LYJ</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> <button class="btn btn-danger navbar-btn">SURVEY</button> </div> </nav>
– bob
Nov 24 '18 at 17:38
add a comment |
1 Answer
1
active
oldest
votes
ok here is a simple nav bar you make,
first you should learn about display:flex
Display flex is used to align divs or elements inside a parent
for example consider this example
<style>
.parent{
display:flex;
align-items:center;
width:50%;
justify-contents:space-between;
}
</style>
<div class="parent">
<div class="child_one">
<p>menu</p>
</div>
<div class="child_two">
<p>menu</p>
</div>
<div class="child_three">
<p>menu</p>
</div>
</div>
if you run the above code you will see a output where all the menuitems will be aligned inline,so you have a basic navbar structure .But to make it responsive you should learn media queries( to make the display flex to block)
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
Im sorry when I tried the code you gave me didn't do anything. I believe its the "justify-contents part but Im no expert.
– bob
Nov 24 '18 at 22:19
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
});
}
});
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%2f53460601%2fassistance-creating-simple-nav-bar%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
ok here is a simple nav bar you make,
first you should learn about display:flex
Display flex is used to align divs or elements inside a parent
for example consider this example
<style>
.parent{
display:flex;
align-items:center;
width:50%;
justify-contents:space-between;
}
</style>
<div class="parent">
<div class="child_one">
<p>menu</p>
</div>
<div class="child_two">
<p>menu</p>
</div>
<div class="child_three">
<p>menu</p>
</div>
</div>
if you run the above code you will see a output where all the menuitems will be aligned inline,so you have a basic navbar structure .But to make it responsive you should learn media queries( to make the display flex to block)
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
Im sorry when I tried the code you gave me didn't do anything. I believe its the "justify-contents part but Im no expert.
– bob
Nov 24 '18 at 22:19
add a comment |
ok here is a simple nav bar you make,
first you should learn about display:flex
Display flex is used to align divs or elements inside a parent
for example consider this example
<style>
.parent{
display:flex;
align-items:center;
width:50%;
justify-contents:space-between;
}
</style>
<div class="parent">
<div class="child_one">
<p>menu</p>
</div>
<div class="child_two">
<p>menu</p>
</div>
<div class="child_three">
<p>menu</p>
</div>
</div>
if you run the above code you will see a output where all the menuitems will be aligned inline,so you have a basic navbar structure .But to make it responsive you should learn media queries( to make the display flex to block)
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
Im sorry when I tried the code you gave me didn't do anything. I believe its the "justify-contents part but Im no expert.
– bob
Nov 24 '18 at 22:19
add a comment |
ok here is a simple nav bar you make,
first you should learn about display:flex
Display flex is used to align divs or elements inside a parent
for example consider this example
<style>
.parent{
display:flex;
align-items:center;
width:50%;
justify-contents:space-between;
}
</style>
<div class="parent">
<div class="child_one">
<p>menu</p>
</div>
<div class="child_two">
<p>menu</p>
</div>
<div class="child_three">
<p>menu</p>
</div>
</div>
if you run the above code you will see a output where all the menuitems will be aligned inline,so you have a basic navbar structure .But to make it responsive you should learn media queries( to make the display flex to block)
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
ok here is a simple nav bar you make,
first you should learn about display:flex
Display flex is used to align divs or elements inside a parent
for example consider this example
<style>
.parent{
display:flex;
align-items:center;
width:50%;
justify-contents:space-between;
}
</style>
<div class="parent">
<div class="child_one">
<p>menu</p>
</div>
<div class="child_two">
<p>menu</p>
</div>
<div class="child_three">
<p>menu</p>
</div>
</div>
if you run the above code you will see a output where all the menuitems will be aligned inline,so you have a basic navbar structure .But to make it responsive you should learn media queries( to make the display flex to block)
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
answered Nov 24 '18 at 17:34
Faizal HussainFaizal Hussain
264110
264110
Im sorry when I tried the code you gave me didn't do anything. I believe its the "justify-contents part but Im no expert.
– bob
Nov 24 '18 at 22:19
add a comment |
Im sorry when I tried the code you gave me didn't do anything. I believe its the "justify-contents part but Im no expert.
– bob
Nov 24 '18 at 22:19
Im sorry when I tried the code you gave me didn't do anything. I believe its the "justify-contents part but Im no expert.
– bob
Nov 24 '18 at 22:19
Im sorry when I tried the code you gave me didn't do anything. I believe its the "justify-contents part but Im no expert.
– bob
Nov 24 '18 at 22:19
add a comment |
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.
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%2f53460601%2fassistance-creating-simple-nav-bar%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
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">LYJ</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> <button class="btn btn-danger navbar-btn">SURVEY</button> </div> </nav>
– bob
Nov 24 '18 at 17:38