Change the position of WordPress Header Widget in Responsive view.

I have a WordPress theme that I created with a program called "Artisteer". This is a Responsive theme. The site (in progress) can be seen here: http://mainemusicmakers.com/

The main Logo (The circle with "Maine Music Makers" and the guitar) were placed in the theme at that header location when I created the theme in Artisteer. The "Services" section (the word services and the 4 icons) have been placed in the "Header Widget Area" within the WordPress "Widgets" section. The placement on a PC screen is fine. The issue is when the site is viewed on smaller devices (tablet, phone, or just shrinking the screen down) - the "Services" section is above the logo - here is my question - how do I move the "Services" section to be below the "Logo" in the responsive view?
JustDuckyDesignsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
I guess anything can be called "responsive" but that does not make it responsive.  Certainly when I see that many obsolete attributes being used in the markup, it is clearly not going to be responsive by even the most generous definition.

I suggest you validate and then cleanup the code to modernize it so truly responsive CSS can be used without being compromised by local attributes that are obsolete.

You are not going to get a truly responsive presentation unless the presentation is from CSS, not markup.

Cd&
0
Jason C. LevineNo oneCommented:
The reasons this happens is because the widget area is defined before the logo is. So on a smaller device, the display reflows and object 1 appears above object 2.

The simplest solution is to edit the appropriate template file (most likely header.php or the artiseer equivalent) and change the order of the code so the logo is defined first and the widgets second.  This is where the validation errors noted by Cd& may come into play.

In theory, the first div will be on top when the responsive layout kicks in.  But the current HTML looks like this:

    <div class="art-shapes">

            </div>

<a href="http://www.mainemusicmakers.com" class="art-logo art-logo-1359241826">
    <img src="http://mainemusicmakers.com/wp-content/themes/MMMLarissa1011142LogoRight/images/logo-1359241826.png" alt="">
</a>

Open in new window


Because the logo is kind of free-falling outside of any divs, it won't behave in a logical fashion.  Furthermore, it has no CSS defined for it and is relying on the other elements in the header to push it around.  This works, but it's kludgey and I will confess I'm not totally sure what will happen if you simply push the div with id=text-5 (look right below the opening <header> tag) below the logo but I suspect the whole header will collapse.

What you need to do is wrap the logo inside a div, place that div above the widget and push it into place on full-width views with CSS and then see what happens on smaller screens.  Based on those changes, we should be able to help further.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JustDuckyDesignsAuthor Commented:
After much trial and error (mostly error....) I went back and put the Services section back in the template header (as part of the logo) and then added this at the bottom of my style.responsive.css file:

.responsive .art-logo-1530224325 {width:100% !important;}
.responsive .art-logo-1530224325 img {width:323px !important; height:auto;}

You can see how it now looks here, this is basically exactly what my client wanted: http://mainemusicmakers.com/

Thank you very much Jason C. Levine for taking the time to help with this question. What you suggested was working, but this other solution gave the customer more what they wanted and made it easier. I'm marking your solution as accepted.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.