Skip to content

Bug Navbar CSS

Solved Customisation
3 2 1.2k 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
  • 2 Votes
    1 Posts
    187 Views
    No one has replied
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    12k Views
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • 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.
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    3k Views
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • New message CSS problem

    Unsolved Customisation css
    11
    1
    2 Votes
    11 Posts
    3k Views
    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?
  • 0 Votes
    9 Posts
    2k Views
    @downpw I’m inclined to agree with this. There isn’t much else you can do, and provided it works with no odd looking artefacts in other browsers, then ok. The :before and :after are pseudo classes and very well supported across all browsers (except perhaps Internet Exploder, but who uses that these days ?)
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    2k Views
    @jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW
  • 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.