Skip to content

navigation bar is misplaced when the window gets smaller

Solved Customisation
23 3 8.1k 1
  • I have the same things for the navbar when I have a lot of icons on the left.

    the solution I found is to move the icons of the navbar to the left to have more room when you click on the search button and no longer have this rather annoying phenomenon

    /*left*/
    @media (min-width: 768px) {
    .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
        margin-right: 0;
        margin-left: -40px;
    }
    }
    
    /*right*/
    @media (min-width: 768px) {
    .navbar-right {
        float: right!important;
        margin-right: -45px;
    }
    }
    
    wrote on last edited by
    #21

    @DownPW said in navigation bar is misplaced when the window gets smaller:

    the solution I found is to move the icons of the navbar to the left to have more room when you click on the search button

    I think perhaps the solution I posted is more elegant - that way, you don’t have to worry about elements shifting when you resize - just a thought 🙂

  • wrote on last edited by
    #22

    I always have the same problem when I click on the search button with your code. So I keep mine and add yours for the problem of window redimmension 🙂

  • I always have the same problem when I click on the search button with your code. So I keep mine and add yours for the problem of window redimmension 🙂

    wrote on last edited by
    #23

    @DownPW sounds good.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • External Links - New Window

    Solved Customisation nodebb links settings
    8
    2 Votes
    8 Posts
    2k Views
    phenomlab
    @Sampo2910 search the forum here for ogproxy which is the client side version of that plugin I wrote. It’s in use here on this forum.
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    3k Views
    phenomlab
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    20k Views
    phenomlab
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • What is this bar called?

    Solved Customisation nodebb
    92
    1
    36 Votes
    92 Posts
    41k Views
    DownPW
    This is good
  • Issues with Progress Bar on v3

    Solved Customisation
    48
    1
    14 Votes
    48 Posts
    20k Views
    phenomlab
    @Panda You could use the below .page-topic .pagination-block.ready { display: none; }
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    19k Views
    DownPW
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • FIXED: Annoying cosmetic bug on mobile view

    Moved Bugs bugs
    13
    3 Votes
    13 Posts
    4k Views
    phenomlab
    And now, after all this time I finally discovered that the CSS I previously referenced was for something else - and used the same CSS name, so I’ve had to reinstate this block .tab-content { max-height: 0; padding: 0 2em; color: #898989; background: #eeeeee; transition: all 0.35s; margin-top: -5px; } And, add this below to make it more specific. .emoji-tabs .tab-content { height: 100%; max-height: 100%; padding: 0; margin: 0; }
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    6k Views
    phenomlab
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3