Skip to content

How to fix header side as boxed

Solved Customisation
10 3 3.0k 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
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    1k Views
    JAC
    @phenomlab thank you very much for the assistance Mark, massively appreciated as always. The great thing about this is it’s all documented for other NodeBB users that come looking for solutions . Looks far better .
  • "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.
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • 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
  • Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    1k Views
    phenomlab
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • 11 Votes
    23 Posts
    10k Views
    phenomlab
    @DownPW No issues. Thanks to the Google Chrome “bug”, it does have some restrictions, but works fine other than that. I have an odd issue where it doesn’t work on Firefox mobile, but works fine on Firefox desktop.
  • Nav Drop-down [Sudonix]

    Moved Bugs
    3
    1
    1 Votes
    3 Posts
    2k Views
    JAC
    @phenomlab said in Nav Drop-down [Sudonix]: @jac Fixed [image: d2e5410b-fa82-4fc9-a861-7913d3c560ab-image.png] Thanks for reporting. Thanks mate, not a problem .
  • WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.