Solved

Change the position of WordPress Header Widget in Responsive view.

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress CLI 4 33
Load google maps api into wordpress 5 37
Inserting meta tags into the <head> . . .</head> area created by get_header() 3 31
WordPress syntax 2 25
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

911 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now