Need help making a header responsive

[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.

Code Select Expand

<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>

[Kindred]

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

Tables as positioning is 10 years out of date. 

[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.

[Chen Zhen]

Here is your code updated to div tables:

Code Select Expand

<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.