Search code examples
htmlcsstwitter-bootstrapnavbarbootswatch

Style custom links (outside of navbar-nav) in navbar like others Bootstrap Bootswatch

I have a navbar in which some of the navbar links always show, even in collapse mode. I am using Bootswatch's Paper theme: Bootswatch Paper Theme.

Desktop: enter image description here

Mobile/Collapsed: enter image description here

The content that continues to show is done by adding 'navbar'header' to a div and pulling it right, so the default styling is not applied to the links inside that.

I have applied some styles, but there are still a few issues.

  • I am not able to add anchor () tag to the links that always show (i.e. 'Show Link 1')

  • If I click on the Username dropdown and click and hold one of the menu links (i.e. Profile), then the color changes:

enter image description here

However, it should look similar to the default dropdown (on the left): enter image description here

<div class="navbar-header navbar-right pull-right">
    <ul class="nav pull-left">
        <li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 1</li>
        <li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 2</li>
        <li class="dropdown pull-right">
            <a href="#" data-toggle="dropdown" id="user-dropdown" class="dropdown-toggle">
                User Name <span class="glyphicon glyphicon-user"></span>
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li class="navbar-link">
                    <a href="/users/id" title="Profile">Profile</a>
                </li>
                <li>
                    <a href="/logout" title="Logout">Logout </a>
                </li>
            </ul>
        </li>
    </ul>
    <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>

Here is a JSFiddle: JSFiddle

Is there a way to add to/modify the variable file so the default styling can be applied regardless of which Bootswatch theme is used, and/or even default Bootstrap theme?

Solution

  • If I am understanding your issues correctly:

    • I am not able to add anchor () tag to the links that always show (i.e. 'Show Link 1')

    Try to add the anchor tag before the <li>

       <a href="#"><li class="navbar-text navbar-link pull-left
       navbar-always-show">Show Link 1</li></a>
    • If I click on the Username dropdown and click and hold one of the menu links (i.e. Profile), then the color changes:

    There are two things that you can do:

    You can either add an extra class to ul in the html and then add style to override the default css, or just override the default style for nav.

    HTML

    <ul class="nav pull-left nav-override">

    CSS

    .nav-override .open > a, .nav-override .open > a:hover, .nav-override .open > a:focus {
    color: #ffffff!important;
    background-color: #0c7cd5!important;
}

    or

    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    color: #ffffff!important;
    background-color: #0c7cd5!important;
}

    fiddle