?
Solved

Change the position of WordPress Header Widget in Responsive view.

Posted on 2014-10-13
3
Medium Priority
?
277 Views
Last Modified: 2014-10-16
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?
0
Comment
Question by:JustDuckyDesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40377590
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
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 40378275
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
 

Author Comment

by:JustDuckyDesigns
ID: 40385081
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question