CODEWITHSUNDEEP
htmlbootstrap-4
iducam
iducam

Reputation: 79

Bootstrap 4 inline navbar links

I'm trying to include an element in my navbar that says "Hello, user" which will redirect to the user's page when the username is clicked. I've been able to create a link that encompasses the entire "Hello, user" phrase, but I would only like the link to apply to the username.

Here's my code:

  <li class="nav-item">
    {# add user page #}
    <span class="navbar-text">Hello, <a class="nav-link" href="#">Trainer {{ user|title }}</a></span>
  </li>

When I try wrapping the code in span tags as above, it is displayed on the page as two lines. Is there a way to format this so that only the username is clickable while maintaining it all as one line?

Upvotes: 0

Views: 25

Answers (1)

Danny
Danny

Reputation: 510

Remove the "nav-link" class from your <a> tag and it will be one line. I'm guessing that class has a display: block; or something like that associated with it.

Upvotes: 1

Related Questions