0

I'm pretty new to CSS and Bootstrap in general.

I have created a standard mvc web app.

I have the standard _layout partial view with the part code shown.

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

In the _LoginPartial view, part code is show:

 <ul class="nav navbar-nav navbar-right">
    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
    <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>

I am trying to add a logo to be placed before the Application name ActionLink. The image is too large and does not size down to the navbar-header's size and the Register and Login text is no longer at the bottom of the navbar.

Its probably something simple, but I cannot figure it out.

I have followed: https://www.youtube.com/watch?v=4dG2ke1JUNs

but that does not work as in the video.

I have also tried: Brand Image too big and not aligned on Bootstrap navbar

but then the image doesn't show.

Any ideas? As said, I'm new to css and bootstrap and have tried using the Developer Tools but cannot figure out why its not working.

Thanks.

Community
  • 1
  • 1
Neill
  • 711
  • 2
  • 13
  • 32
  • this post might help http://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo – iamrico Jun 01 '16 at 17:56
  • That didn't do exactly what I wanted, but adding margin-top to the .navbar-right in the css file sorted it out. Thanks. – Neill Jun 02 '16 at 07:15

0 Answers0