How to avoid navbar collapsing…

[cscodismith]

I am currently trying to get my navbar styled as I want to. I am using the navigation bar at Sitepoint Forums as a reference as I like how their’s looks. The problem I am having with my navigation bar is that it collapses after changing the width of the window but I would rather have it not collapse and just stay aligned towards the right of the navigation bar.

Here is the codepen project. I have tried to remove the div.navbar-collapse completely but when I do that the .log-in and sign-up buttons appear directly under the brand. Also, When I try to use a @media query like the following:

@media (max-width: 320px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

to override it; it still just collapses too early!

Thanks in advance,
Codi B.-Smith

[I.m.learning]

I looked at the Sitepoint page you are taking from. It’s not as elegant as you may think. If you slowly minimize the page, you can see their menu is actually dropping down. “Podcast” actually runs across “Latest.”

What about using this site’s navbar? It looks like you should be able to combine the 2 to your liking.

[Author]

Posts