News:

SMF 2.1.2 has been released! Take it for a spin! Read more.

Main Menu

Need help making a header responsive

Started by Oldiesmann, July 01, 2022, 12:45:47 PM

Previous topic - Next topic

Oldiesmann

I recently upgraded a forum I found from SMF 1.1.13 to SMF 2.1. They had a custom header at the top of the forum with their name/logo and a couple of links back to the main site. I'd like to add it back if possible, but would like to keep it responsive. Here's the code they're using. I've also attached the images if that helps at all.

<table border=0 height=84 cellpadding="0" cellspacing="0" width="100%"><tr><td background="/nav/headerbg.jpg"><div align="center"><img src="/nav/newheader.jpg" width="770" height="84"></div></td></tr>
<tr><td background="/nav/navbg.jpg"><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td><a href="/"><img src="/nav/home.jpg" border="0"></a></td><td><a href="http://www.finescalerr.com/subscribe.htm"><img src="/nav/order.jpg" border="0"></a></td><td><a href="http://www.finescalerr.com/smf/"><img src="/nav/forum.jpg" border="0"></a></td></tr></table></td></tr></table>
Michael Eshom
Christian Metal Fans

Kindred

Well, for one, replace the table/tr/td with divs

Tables as positioning is 10 years out of date.  ;)
Слова
Украина

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Chen Zhen


I'm a week late replying on this one but I see it's still not marked as resolved.

I did a mod for someone a few months back that will do what's been requested here.
It's up on my site now for download if you want to try it out.
ref. https://web-develop.ca/index.php?action=downloads;area=stable_smf_modifications;file=90

It's all hooks with no SMF file edits.

My SMF Mods & Plug-Ins

WebDev


"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Chen Zhen

Here is your code updated to div tables:

<div style="display: table;border: 0px;height: 84px;width: 100%;border-spacing: 0px;">
<div style="display: table-row;">
<div style="display: table-cell;background-image: url("./nav/headerbg.jpg");background-repeat: no-repeat;">
<div style="text-align: center;margin: 0 auto;">
<img src="./nav/newheader.jpg" style="width: 770px;height: 84px;object-fit: cover;" />
</div>
</div>
</div>
<div style="display: table-row;">
<div style="padding: 0px;display: table-cell;background-image: url("./nav/navbg.jpg");background-repeat: no-repeat;">
<div style="display: table;border: 0px;border-spacing: 0px;text-align: center;margin: 0 auto;">
<div style="display: table-row;">
<div style="display: table-cell;padding: 0px;">
<a href="/">
<img src="./nav/home.jpg" style="border: 0px;" />
</a>
</div>
<div style="display: table-cell;padding: 0px;">
<a href="http://www.finescalerr.com/subscribe.htm">
<img src="./nav/order.jpg" style="border: 0px;" />
</a>
</div>
<div style="display: table-cell;padding: 0px;">
<a href="http://www.finescalerr.com/smf/">
<img src="./nav/forum.jpg" style="border: 0px;" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>



The mod I referenced has been updated to v1.2 which allows a transparent background setting and no corner icons. You might like it if you are using this on the SMF part of your client's environment.

If you are only using this on your client's main page then the above code should work for you either way.

My SMF Mods & Plug-Ins

WebDev


"Either you repeat the same conventional doctrines everybody is saying, or else you say something true, and it will sound like it's from Neptune." - Noam Chomsky

Advertisement: