Razor Pages - nav-link Not Displaying Correctly

Question

User1271969696 posted

Hi All,

I have just developed my first Razor Pages site and come across an issue I can't seem to find a way to fix (been googling for hours!):

I am using the standard navbar and added a link to a page that is in a folder (created as per an MS tutorial I was following). The folder structure (in VS 2019) is like this:

• Emulation2
  • Pages
    • Emulators
      • Emulators_List.cshtm

My Header code is as follows:

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-navbar border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">Emulators</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav d-sm-flex align-items-center flex-grow-1">
                    <li class="nav-item h-100">
                        <a class="nav-link" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item h-100">
                        <a class="nav-link" asp-page="/Privacy">Privacy</a>
                    </li>
                    <li class="nav-item h-100">
                        <a class="nav_link" asp-page="/Emulators/Emulators_List">Emulators</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

When I run my project, everything works fine (i.e. all links take me to the correct page etc.), BUT the navbar is rendered incorrectly. The first two items use the Bootstrap Theme, but the last item renders as a normal hyperlink.

I have tried both Edge & Chrome with the same result.

When I check the generated html (via F12 in the browser), I see this for the 'Home' & 'Privacy' links:

element.style {
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.5);
}
@media (min-width: 576px)
.navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
}

and this for the 'Emulators' link (i.e. it's being rendered using the 'a' attribute, not 'nav-bar'):

element.style {
}
a {
    color: #2A9FD6;
    text-decoration: none;
    background-color: transparent;
}
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}

Does anyone have any pointers/ideas why this is happening, and how I can fix it?

Thanks in advance

Answer 1

User-1330468790 posted

Hi Spinalsoft,

 

The problem is located in the "class" value

You might accidentally typed "nav_link" as the class value which should be assigned with "nav-link" as previous two links.

 <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav d-sm-flex align-items-center flex-grow-1">
                    <li class="nav-item h-100">
                        <a class="nav-link" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item h-100">
                        <a class="nav-link" asp-page="/Privacy">Privacy</a>
                    </li>
                    <li class="nav-item h-100">
                        <a class="nav-link" asp-page="/Emulators/Emulators_List">Emulators</a>
                    </li>
                </ul>
            </div>

 

Hope this can help you.

Best regards,

Sean

Answer 2

User1271969696 posted

Hi Sean,

Thanks so much, that has fixed it up! 

I can't believe I didn't pick that up, I must have looked at that code hundreds of times.

Thanks once again.

Shando

Answer 3

User-1330468790 posted

Hi Spinalsoft,

 

I'm glad that you have solved your issue. Spelling mistake is a common issue.

I suggest you could mark the answer if you think it is helpful. This will help other people who faces the same issue to find the right answer faster.

 

Best regards,

Sean