UBB.Developers Forums UBB.threads 7 Development CSS Styles and Themes Responsive header

Now that we have a responsive design, I'm wondering how to go about changing the header of my site.
Normally it's 1000px wide and centered in the middle of the screen.

My existing header ruins the responsiveness.
i.e. I had a Logo and then a banner side by side and underneath them, a horizontal menu.
(Previously all at 1000px width)

How would I go about coding this so that it looks good on a desktop, but also on a mobile device?

Thanks.

I designed two separate headers and have it displayed by if it is a desktop / tablet or a mobile phone type device according to screen size.

I did this for a client:

Driv and JAISP, read through this post
http://www.ubbcentral.com/forums/ub.../re-image-resizing-for-mobile#Post259144

It is based off from THIS post:
https://ubbdev.com/forums/ubbth...lates-for-purchase-7-6-0.html#Post322556

Gizmo, No need to add any of the "background:url..." stuff. That was for a client of yours who had a text overlays on his graphics.
Its a good example, but its not needed for most situations

I had read both of those threads as they where happening.

I had designed similar but different headers and graphics for my websites for either mobile or other use depending on what was accessing the message systems. Also my graphics in my one site changes for nightfall or daybreak in progression over an hours time. Plus for the non mobile phone user my site header changes for holidays and various seasons. All this is according to date and time base.

Setting static background is one way of doing things, but its limited in that it has its own set of problems.

Briefly visit this page and scroll down:
http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

Then dig in to this one:
https://en.wikipedia.org/wiki/Responsive_web_design

And finally, have a quick skim through this page:
https://www.w3schools.com/html/html_responsive.asp

Yeah, sorry. I'm like 49, when I started bangin' away on a keyboard in 1982 they didn't have schools for all this stuff nor was the vastness of the Internet a reality lol. We had computer user groups sparsely scattered all over the country as where we thought each other computer programming.

As time went on some of us kept up with it and others had dropped along the wayside. I totally understand the sites you have directed me to and know of the aspect and reasoning. My site uses various different graphics for different devices for the sole reason of clarity, visibility, and design intent related to the fore mentioned.

I'm still old school but my reasoning for relating to the old school methods are for many reasons. Fifty years from now you won't find anyone cherishing a 2017 Ford Mustang but to this day the 1967 Ford Mustang Fastback is well sought after, for many good reasons.

Yep, up until October of 2013 I hand coded everything (as an amateur) but that's when I switched to Joomla. Since then I have sorely neglected my CSS - which is why I don't have a clue about responsive design...

Could I ask you to share this code JAISP?

I'm in the process of rewriting it once again to be specific on the change from night / day and so on to be time exact for the northern hemisphere. Also keep in mind I'm old school and not up to date expert on the latest and / or greatest coding and so on but this works for me.

Please hold any negative criticism please. I wrote this in notepad and coded it all by hand.

http://www.abeagleworld.com/download/head.txt

I wouldn't dream of criticising your code mate, I appreciate you sharing.

By the way id242, the max-width:1000px; height:auto; worked just as I needed it to.
Thanks.

I only mentioned that as I get negative criticism all the time lol.

Thanks for your comment

And JAISP... it was only "negative" because "negative" = "nothing." and normally "nothing" is dark. and it was dark outside, which explains why it was "negative."

You believe me, rite?

excuse me while I head back to the dog house.

LOL@id242

If you look at that code you will notice it changes the logo image aka dog from day to night. Eventually I will totally rewrite the code you see here as well, make it extreamly complex, add additional files separating everything into its own file, add additional folders for each type of interaction, and redefine everything written so far, then use that code.