Header / Nav Bar resize to screen size

[London01]

Hello,
I have two Weebly websites and use the same theme on both.  On both sites the pages resize the content to best fit the size of the screen that the user is using.  However the header and navigation bar are not resizing.  Instead on smaller screens they are divided into two rows, which looks bad, instead of just resizing the text and content to fit the screen and keeping it in a single row.  Is there any way to fix this issue?  One of my websites is TrainingSolutionsInternational.com if you want to see for yourself.  I can also provide a screenshot if needed.  Thank you.

[PaulMathews]

@London Looks like this is either a third-party theme or a very heavily customized Weebly theme. At the 500px viewport breakpoint, you have media queries that change the ".header-bar .eq-col-left" and ".header-bar .eq-col-right" classes to stack vertically. If you want them to retain the two-column layout as they have for viewports bigger than 500px, you have to modify the 500px media queries so that each class has the same settings for viewports smaller than 500px as they have for viewports larger than 500px. In particular, the right class needs to keep its width at 75% and display as "table-cell" and the left class width needs to stay at 25% and both classes need to retain their display as "table-cell" (instead of both widths changing to 100% and display changing to block in both cases).

[London01]

I'm not real good with working on the code side of things, but I will take a look at what you are recommending.  Thanks!