Solved

Change the position of WordPress Header Widget in Responsive view.

Posted on 2014-10-13
3
245 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
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 500 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

770 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