Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to avoid navbar collapsing…

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #248038
    cscodismith
    Participant

    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

    #248049
    I.m.learning
    Participant

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.