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

Question

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:

Mobile/Collapsed:

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:

However, it should look similar to the default dropdown (on the left):

<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?

Victor Luna · Accepted Answer · 2017-03-27T15:42:15.947

1

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

edited Mar 27 '17 at 15:42

answered Mar 24 '17 at 20:05

Victor Luna

1,746
2
17
36

Thank you for the response. Adding the anchor tag breaks things when collapsed. And The background of the "User name" should behave like last image. – Mohammad Ali Mar 24 '17 at 20:23
Changed the css in the answer to have the background as the last image. Could you tell me the expected layout for the collapse nav? – Victor Luna Mar 24 '17 at 20:48
Have you tried opening the username dropdown, click and holding on one of the options? Background shows like the 3rd image, but it should be like the 4th. – Mohammad Ali Mar 27 '17 at 14:05
Updated the answer and fiddle, was that what you were looking for? – Victor Luna Mar 27 '17 at 15:43
Yes, that is what I was looking for. Thank you! Do you know of any way to generalize and add this to the theme's variable section so it can be applied to any theme from bootswatch? – Mohammad Ali Mar 29 '17 at 12:17
Not sure what you mean. I think it is best if you override it in the main.css, this way you have more control over the changes, but thats just my opinion. – Victor Luna Mar 30 '17 at 00:33
Each theme would have a different styling. Should I go through and override styling for each theme as needed? – Mohammad Ali Mar 30 '17 at 12:49

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

1 Answers1