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 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; }
  • NodeBB upgrade now cant post

    Solved Bugs nodebb
    5
    2 Votes
    5 Posts
    2k Views
    phenomlab
    @Panda yes, for some reason, that is the case. If you need an urgent response, it’s probably better to post here because of the time difference.
  • optional "snow falling" theme

    Solved Customisation nodebb
    6
    6 Votes
    6 Posts
    2k Views
    phenomlab
    @Sala ok, but that’s still the same loop which is going to have an impact on the CPU.
  • How to fix size of photos & videos NodeBB

    Solved Customisation nodebb nodebb size
    7
    3 Votes
    7 Posts
    3k Views
    phenomlab
    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt https://stackoverflow.com/questions/609517/why-em-instead-of-px
  • 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; }
  • Forum Statistics Box

    Solved Customisation customization
    5
    2
    4 Votes
    5 Posts
    2k Views
    phenomlab
    @Sampo2910 said in Forum Statistics Box: Say i wanted new theme for example or again something like this? Yes, exactly the same process.
  • 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.
  • 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; }