Skip to content
Sudonix

Bug Navbar CSS

Solved Customisation
3 2 1.2k 1
  • DownPWundefined

    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?

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    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?

    phenomlabundefined

    @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;
}

    Mark – Founder, Phenomlab Ltd
    Executive IT & Security Leadership
    Phenomlab Ltd

    1
  • DownPWundefined

    Not better way.

    Thanks.

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW has marked this topic as solved on
Log in to reply

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

    CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    2k Views
    phenomlabundefined
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • crazycellsundefined

    CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    1k Views
    crazycellsundefined
    @phenomlab yes, it is thanks a lot…
  • DownPWundefined

    Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    4k Views
    phenomlabundefined
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • DownPWundefined

    answers appearance css code request

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

    CSS codes for fa-info icon

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

    [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    100k Views
    DownPWundefined
    @baris said: You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected. I modified the JS Fancybox code now and this code and it seem better // --------------------------------------------- // Fancybox Media Reader (Without Website Logo) // --------------------------------------------- if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { // >>> Se limiter au contenu principal uniquement <<< $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); For the logo, I must use overflow: visible !important; on [component="brand/logo"] /* --- Logo --- */ [component="brand/logo"] { max-height: 50px; width: auto; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; overflow: visible !important; } Better result !!
  • DownPWundefined

    [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    phenomlabundefined
    @downpw ooops. Forgot that. Thanks for adding.
  • DownPWundefined

    Border Frame WYSIWYG CSS

    Solved Customisation css wysiwyg
    6
    1
    2 Votes
    6 Posts
    1k Views
    phenomlabundefined
    @DownPW just circling back to this, as I did eventually find the class. Seems you can disable the outline using the below CSS textarea { outline: none; }