Solved

Change the position of WordPress Header Widget in Responsive view.

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
HTML table 7 54
Can't find where tracking pixels are coming from 2 40
Compare site how does it work 4 51
Stupid git question 2 20
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
WordPress is constantly evolving, and with each evolution appears to get better and better.  One of the big drawbacks prior to version 3 was that there was no way to be able to set up a custom menu from the backend. The Old Way Adding menus is…
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…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

708 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

17 Experts available now in Live!

Get 1:1 Help Now