Mixing
FontAwesome Icon On Same Line As NavBar
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a navigation bar that displays properly until a user logs in.
Before logging in:
After logging in:
I'm having trouble figuring out why the Log Out fontawesome icon is wrapping onto the next line, when it's the same size (I attempted making it slightly smaller even) than the avatar icon to login. The problem isn't the width of the parent div, because I attempted adding another <li><a>Test Item</a></li> and it didn't wrap to the next line.
HTML:
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="../../">Home</a></li>
<li><a href="../../Home/Build">Build A Box</a></li>
<li><a href="../../Home/Faq">FAQ</a></li>
<li><a href="../../Home/Contact">Contact Us</a></li>
@if (User.Identity.IsAuthenticated)
{
<li><a href="../../Home/Account">My Account</a></li>
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
@Html.AntiForgeryToken()
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link fa fa-sign-out"></a></li>
}
}
else
{
<li class="nav-item dropdown">
<a href="#" id="LoginDropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" class="nav-link dropdown-toggle fa fa-user-circle"></a>
<div class="dropdown-menu" aria-labelledby="LoginDropdownLink">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = "../../Home/Account" }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.TextBoxFor(m => m.Email, new { @class = "input-text", @placeholder="Email Address"})
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
@Html.PasswordFor(m => m.Password, new { @class = "input-text", @placeholder="Password" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
<input type="submit" value="Log in" class="btn btn-default" />
}
</div>
</li>
}
</ul>
html css
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
add a comment |
I have a navigation bar that displays properly until a user logs in.
Before logging in:
After logging in:
I'm having trouble figuring out why the Log Out fontawesome icon is wrapping onto the next line, when it's the same size (I attempted making it slightly smaller even) than the avatar icon to login. The problem isn't the width of the parent div, because I attempted adding another <li><a>Test Item</a></li> and it didn't wrap to the next line.
HTML:
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="../../">Home</a></li>
<li><a href="../../Home/Build">Build A Box</a></li>
<li><a href="../../Home/Faq">FAQ</a></li>
<li><a href="../../Home/Contact">Contact Us</a></li>
@if (User.Identity.IsAuthenticated)
{
<li><a href="../../Home/Account">My Account</a></li>
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
@Html.AntiForgeryToken()
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link fa fa-sign-out"></a></li>
}
}
else
{
<li class="nav-item dropdown">
<a href="#" id="LoginDropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" class="nav-link dropdown-toggle fa fa-user-circle"></a>
<div class="dropdown-menu" aria-labelledby="LoginDropdownLink">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = "../../Home/Account" }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.TextBoxFor(m => m.Email, new { @class = "input-text", @placeholder="Email Address"})
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
@Html.PasswordFor(m => m.Password, new { @class = "input-text", @placeholder="Password" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
<input type="submit" value="Log in" class="btn btn-default" />
}
</div>
</li>
}
</ul>
html css
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
add a comment |
I have a navigation bar that displays properly until a user logs in.
Before logging in:
After logging in:
I'm having trouble figuring out why the Log Out fontawesome icon is wrapping onto the next line, when it's the same size (I attempted making it slightly smaller even) than the avatar icon to login. The problem isn't the width of the parent div, because I attempted adding another <li><a>Test Item</a></li> and it didn't wrap to the next line.
HTML:
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="../../">Home</a></li>
<li><a href="../../Home/Build">Build A Box</a></li>
<li><a href="../../Home/Faq">FAQ</a></li>
<li><a href="../../Home/Contact">Contact Us</a></li>
@if (User.Identity.IsAuthenticated)
{
<li><a href="../../Home/Account">My Account</a></li>
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
@Html.AntiForgeryToken()
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link fa fa-sign-out"></a></li>
}
}
else
{
<li class="nav-item dropdown">
<a href="#" id="LoginDropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" class="nav-link dropdown-toggle fa fa-user-circle"></a>
<div class="dropdown-menu" aria-labelledby="LoginDropdownLink">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = "../../Home/Account" }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.TextBoxFor(m => m.Email, new { @class = "input-text", @placeholder="Email Address"})
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
@Html.PasswordFor(m => m.Password, new { @class = "input-text", @placeholder="Password" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
<input type="submit" value="Log in" class="btn btn-default" />
}
</div>
</li>
}
</ul>
html css
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
I have a navigation bar that displays properly until a user logs in.
Before logging in:
After logging in:
I'm having trouble figuring out why the Log Out fontawesome icon is wrapping onto the next line, when it's the same size (I attempted making it slightly smaller even) than the avatar icon to login. The problem isn't the width of the parent div, because I attempted adding another <li><a>Test Item</a></li> and it didn't wrap to the next line.
HTML:
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="../../">Home</a></li>
<li><a href="../../Home/Build">Build A Box</a></li>
<li><a href="../../Home/Faq">FAQ</a></li>
<li><a href="../../Home/Contact">Contact Us</a></li>
@if (User.Identity.IsAuthenticated)
{
<li><a href="../../Home/Account">My Account</a></li>
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
@Html.AntiForgeryToken()
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link fa fa-sign-out"></a></li>
}
}
else
{
<li class="nav-item dropdown">
<a href="#" id="LoginDropdownLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" class="nav-link dropdown-toggle fa fa-user-circle"></a>
<div class="dropdown-menu" aria-labelledby="LoginDropdownLink">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = "../../Home/Account" }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.TextBoxFor(m => m.Email, new { @class = "input-text", @placeholder="Email Address"})
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
@Html.PasswordFor(m => m.Password, new { @class = "input-text", @placeholder="Password" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
@Html.CheckBoxFor(m => m.RememberMe)
@Html.LabelFor(m => m.RememberMe)
<input type="submit" value="Log in" class="btn btn-default" />
}
</div>
</li>
}
</ul>
html css
html css
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
asked Jan 3 at 16:18
extensionhelpextensionhelp
19310
19310
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It's hard to say without the CSS but try to remove nav-link in the class attribute of the logout link (l.14 in your code).
So the line will be:
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="fa fa-sign-out"></a></li>
Because the other links do not have this class so I suspect it to be the cause of your trouble.
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
It turns out that the problem was actually that the Html.BeginForm tag was invoking a new line. Just had to add a display: inline attribute to the form. Thanks for your help!
– extensionhelp
Jan 4 at 2:51
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%2f54026065%2ffontawesome-icon-on-same-line-as-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
It's hard to say without the CSS but try to remove nav-link in the class attribute of the logout link (l.14 in your code).
So the line will be:
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="fa fa-sign-out"></a></li>
Because the other links do not have this class so I suspect it to be the cause of your trouble.
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
It turns out that the problem was actually that the Html.BeginForm tag was invoking a new line. Just had to add a display: inline attribute to the form. Thanks for your help!
– extensionhelp
Jan 4 at 2:51
add a comment |
It's hard to say without the CSS but try to remove nav-link in the class attribute of the logout link (l.14 in your code).
So the line will be:
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="fa fa-sign-out"></a></li>
Because the other links do not have this class so I suspect it to be the cause of your trouble.
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
It turns out that the problem was actually that the Html.BeginForm tag was invoking a new line. Just had to add a display: inline attribute to the form. Thanks for your help!
– extensionhelp
Jan 4 at 2:51
add a comment |
It's hard to say without the CSS but try to remove nav-link in the class attribute of the logout link (l.14 in your code).
So the line will be:
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="fa fa-sign-out"></a></li>
Because the other links do not have this class so I suspect it to be the cause of your trouble.
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
It's hard to say without the CSS but try to remove nav-link in the class attribute of the logout link (l.14 in your code).
So the line will be:
<li><a href="javascript:document.getElementById('logoutForm').submit()" class="fa fa-sign-out"></a></li>
Because the other links do not have this class so I suspect it to be the cause of your trouble.
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
answered Jan 3 at 16:24
MaartiMaarti
1,9073923
1,9073923
It turns out that the problem was actually that the Html.BeginForm tag was invoking a new line. Just had to add a display: inline attribute to the form. Thanks for your help!
– extensionhelp
Jan 4 at 2:51
add a comment |
It turns out that the problem was actually that the Html.BeginForm tag was invoking a new line. Just had to add a display: inline attribute to the form. Thanks for your help!
– extensionhelp
Jan 4 at 2:51
It turns out that the problem was actually that the Html.BeginForm tag was invoking a new line. Just had to add a display: inline attribute to the form. Thanks for your help!
– extensionhelp
Jan 4 at 2:51
It turns out that the problem was actually that the Html.BeginForm tag was invoking a new line. Just had to add a display: inline attribute to the form. Thanks for your help!
– extensionhelp
Jan 4 at 2:51
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%2f54026065%2ffontawesome-icon-on-same-line-as-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
