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:
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.
Would be very grateful for anyone's help. Thanks.
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.