Skip to content

How to fix header side as boxed

Solved Customisation
10 3 3.1k 1
  • wrote on last edited by
    #1

    Hi again,
    Could we fix header as boxed type? I wanna fix it like contet size.
    be25cf49-9a59-4f96-b80c-fdd13bc3ac31-image.png

  • Hi again,
    Could we fix header as boxed type? I wanna fix it like contet size.
    be25cf49-9a59-4f96-b80c-fdd13bc3ac31-image.png

    wrote on last edited by
    #2

    @cagatay Hi - do you want the view wider ?

    You can amend the container class such as below

    @media (min-width: 1200px) {
    .container {
        width: 1920px;
    }
    }
    

    That would give you the below

    b1d416f6-6130-43c5-b58b-d181a2d0bb2f-image.png

  • @cagatay Hi - do you want the view wider ?

    You can amend the container class such as below

    @media (min-width: 1200px) {
    .container {
        width: 1920px;
    }
    }
    

    That would give you the below

    b1d416f6-6130-43c5-b58b-d181a2d0bb2f-image.png

    wrote on last edited by cagatay
    #3

    @phenomlab no dear i want to view header side like boxed type not wide. Where is dark blue colored.

  • @phenomlab no dear i want to view header side like boxed type not wide. Where is dark blue colored.

    wrote on last edited by DownPW
    #4

    @cagatay

    like this ?

    36afb9c2-9d47-4a15-b194-c1e5bdd291b4-image.png

    if yes :

    .navbar-fixed-top {
        background: #dee6f3;
        border-bottom: 5px outset #90A4AE;
        border-radius: 8px;
    }
    
    .navbar-default .navbar-nav>li>a {
        color: #000;
    }
    
  • @cagatay

    like this ?

    36afb9c2-9d47-4a15-b194-c1e5bdd291b4-image.png

    if yes :

    .navbar-fixed-top {
        background: #dee6f3;
        border-bottom: 5px outset #90A4AE;
        border-radius: 8px;
    }
    
    .navbar-default .navbar-nav>li>a {
        color: #000;
    }
    
    wrote on last edited by cagatay
    #5

    @DownPW no, I want the header to align with the contents of my homepage.
    i want to narrow my header which shown photo. (header = navbar)

    bf6584da-bdd4-4f2d-ac70-5c50c5aee05f-image.png

  • @DownPW no, I want the header to align with the contents of my homepage.
    i want to narrow my header which shown photo. (header = navbar)

    bf6584da-bdd4-4f2d-ac70-5c50c5aee05f-image.png

    wrote on last edited by
    #6

    @cagatay You want the header to be the same width as the main content, yes? I personally wouldn’t do that because if you do, it’s likely to impact the main content

  • @DownPW no, I want the header to align with the contents of my homepage.
    i want to narrow my header which shown photo. (header = navbar)

    bf6584da-bdd4-4f2d-ac70-5c50c5aee05f-image.png

    wrote on last edited by DownPW
    #7

    @cagatay

    ha okkk sorry

    yo ucan play with left and right like this :

    .navbar-fixed-bottom, .navbar-fixed-top {
        position: fixed;
        right: 80px;
        left: 80px;
        z-index: 1030;
    }
    

    2e6472ad-f947-49a0-9539-be7a83463bcc-image.png

    EDIT:

    But @phenomlab is right, this can be a problem depending on the content of this element 🙂

  • @cagatay

    ha okkk sorry

    yo ucan play with left and right like this :

    .navbar-fixed-bottom, .navbar-fixed-top {
        position: fixed;
        right: 80px;
        left: 80px;
        z-index: 1030;
    }
    

    2e6472ad-f947-49a0-9539-be7a83463bcc-image.png

    EDIT:

    But @phenomlab is right, this can be a problem depending on the content of this element 🙂

    wrote on last edited by
    #8

    @DownPW Whilst this works, I wouldn’t recommend changing it. The CSS above is global in nature and will be effective against all breakpoints, including mobile, which doesn’t work very well for the user experience. The theme is responsive out of the box, so (in my view) you should leave it as it is.

    It’s the Bootstrap standard 🙂

  • @DownPW Whilst this works, I wouldn’t recommend changing it. The CSS above is global in nature and will be effective against all breakpoints, including mobile, which doesn’t work very well for the user experience. The theme is responsive out of the box, so (in my view) you should leave it as it is.

    It’s the Bootstrap standard 🙂

    wrote on last edited by
    #9

    @phenomlab absolutely👍

  • @DownPW Whilst this works, I wouldn’t recommend changing it. The CSS above is global in nature and will be effective against all breakpoints, including mobile, which doesn’t work very well for the user experience. The theme is responsive out of the box, so (in my view) you should leave it as it is.

    It’s the Bootstrap standard 🙂

    wrote on last edited by cagatay
    #10

    @phenomlab yes it caused a problem for mobile users.
    thank you for helping …

  • cagatay cagatay 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
  • "most votes" ranking option is not respecting the plugin

    Bugs nodebb
    5
    1
    3 Votes
    5 Posts
    2k Views
    phenomlab
    @crazycells Agreed. It takes a more sensible approach. Nobody ever upvotes the first post - it’s usually much further down as the conversation progresses.
  • 4 Votes
    7 Posts
    3k Views
    crazycells
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • Nodebb 3.2.0

    Bugs nodebb nodebb 3.2.0
    20
    1
    2 Votes
    20 Posts
    7k Views
    phenomlab
    @crazycells yes, I’m aware of that. Need to fix EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • Link vs Refresh

    Solved Customisation nodebb blog customization
    20
    2
    8 Votes
    20 Posts
    7k Views
    phenomlab
    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related
  • Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    2k Views
    crazycells
    @phenomlab thanks a lot, this combination works best .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    JAC
    @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 - Created pages not found?

    General
    20
    3 Votes
    20 Posts
    6k Views
    phenomlab
    @jac Exactly. Hard point to argue.