6

Am currently new to ASP.NET and am currently in process of learning how to change theme.

What I've done:

  1. With VS2017, I started a new ASP.NET Web Application. This is the default theme before i changed the CSS. enter image description here

  2. I got a theme from : https://bootswatch.com/lumen/ and replaced Content/bootstrap.css with the new theme code as ive been instructed to by multiple tutorials.

enter image description here After doing those steps, my header navigation messes up and suddenly converts into a ugly looking dropdown menu?

Below is what it should actually look like. This is what it should actually look like.

Could someone tell me where I went wrong, or if ive missed any steps? Im following instructions from a video tutorial to the T and ive not missed any steps and am unable to achieve the same output. The only difference is the instructor is using VS2013.

Improve this question

3 Answers 3

Reset to default
22

You're watching the course on ASP.NET MVC 5 made by Mosh Hamedani I presume. You're downloading the latest version of the Bootswatch theme which is meant for Bootstrap 4. The default MVC 5 template uses Bootstrap 3.

You need to download this version of the Lumen theme: "https://bootswatch.com/3/lumen/"

Alternatively you could upgrade to Bootstrap 4 by updating your Bootstrap NuGet package.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

If ever you can't update the bootstrap nugget. You can change class in the div tag in the _Layout.cshtml inside the Shared folder. What I did is I change the code to this syntax.

<div class="navbar navbar-expand navbar-fixed-top">

It was shown as <div class="navbar navbar-inverse navbar-fixed-top">

change the class to navbar navbar-expand navbar-fixed-top, it will expand all the menu in the navbar cause it was just hidden.

Improve this answer

Comments

1

Another way to download the Bootstrap 3 version of the Lumen theme is via the Bootswatch GitHub repository.

URL for CSS file: https://raw.githubusercontent.com/thomaspark/bootswatch/v5/docs/3/lumen/bootstrap.css

At the time of writing, the Bootswatch home page has the link to the GitHub repository along the top, directing you to the URL below.

URL for Bootswatch GitHub repository: https://github.com/thomaspark/bootswatch/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.