XF 2.3 Unable to keep header row in mobile view

Big Easy

New member
Hi all, newbie here, just building out my first forum on Xenforo cloud. Know a little CSS but not a lot.

I've been setting up the page basics, and noticed that under 650px, my header row vanishes and the logo moves to the Nav bar. I'm not keen on this and would prefer the row and logo to stay where it is.

Inspecting the code in Chrome I can see that the problem appears to be with this element:

Code:
@media (max-width: 650px) {
    .has-js .p-header {
          display: none

   }

}

If I change the last line to display: block then in Chrome I can see that the header row is now visible at all screen widths. However, if I add this element to the Extra section for the Header Row in the ACP nothing changes and inspecting the code in Chrome still shows display: none. I'm assuming I'm doing something wrong but I haven't a clue what it is.

I've also seen the following element in another forum which has the header row visible at all widths, which I presume is to stop the logo then appearing in the nav bar. However, again, this doesn't do anything on my page when added to the Extra code.

Code:
.p-nav-smallLogo {

    display: none !important

}

Would be very grateful for anyone's help. Thanks.
 
Well I figured it out myself eventually. In case anyone else faces the same issue my conclusion was that making the change in the Extra section within the Style Properties of the Header/Logo Row achieved nothing at all. I've since deleted it.

However, when I added/amended the same code in the Template "app_header.less" (as below) this immediately gave me the result I was after.

Code:
@media (max-width: @xf-publicNavCollapseWidth)
{
    .has-js .p-header
    {
        display: block;
    }
}

.p-nav-smallLogo {
    display: none !important
}
 
Back
Top Bottom