Skip to content

Bug Navbar CSS

Solved Customisation
3 2 996 1
  • Hi,

    I have this bug on my navbar with Night Mode Plugin.
    A space appears between bottom border and higlight/active icon :
    alt text

    Here is my CUSTOM CSS

    .navbar-default {
        background-color: black;
        border-color: 2px solid silver;
        box-shadow: 0 0 5px 0 silver;
        opacity: 1;
    }
    

    I’m oblige to add this for fix this bug:

    .navbar-default {
    ...
    ...
    ...
    ....
    height: 50px;
    }
    

    Can we do better than that?

  • Hi,

    I have this bug on my navbar with Night Mode Plugin.
    A space appears between bottom border and higlight/active icon :
    alt text

    Here is my CUSTOM CSS

    .navbar-default {
        background-color: black;
        border-color: 2px solid silver;
        box-shadow: 0 0 5px 0 silver;
        opacity: 1;
    }
    

    I’m oblige to add this for fix this bug:

    .navbar-default {
    ...
    ...
    ...
    ....
    height: 50px;
    }
    

    Can we do better than that?

    @downpw It’s because of the drop shadow you are using. If you set the below CSS, then this will counteract it

    .navbar-default {
        height: 50px;
    }
    

    Or, you could use

    .navbar-default {
        max-height: 50px;
    }
    
  • Not better way.

    Thanks.

  • DownPWundefined DownPW has marked this topic as solved on

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
  • navbar

    Solved Customisation navbar harmony
    2
    2 Votes
    2 Posts
    511 Views
    Marking as resolved, based on https://community.nodebb.org/topic/18625/navbar/2
  • 15 Votes
    51 Posts
    12k Views
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    1k Views
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: 1669026666905-e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • CSS codes for fa-info icon

    Solved Customisation nodebb
    9
    1
    6 Votes
    9 Posts
    2k Views
    I have just figured it out… it can be targeted with text-decoration-color: I was mistakenly using color
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    3k Views
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    34k Views
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k Views
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    1k Views
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.