Centric Responsive Menu

[clownfish]

I'm using the primary menu below the header in Centric Pro instead of to the right of the header as it is in the demo.

However, it is not responsive in this position and I'm not sure if this is because of customisations I've made.

I can't find a solution. I'd really appreciate if someone could take a look.

http://annieminton.com.au/termex

[Brad Dalton]

Yes. The customisations you have made have messed up the responsiveness so these will need redoing.

I also noticed there was a missing closing bracket } after the Media Queries for max-width: 1023px.

---

Tutorials for StudioPress Themes.

[clownfish]

Thanks for your response.

I've removed the code I had pasted into the media queries area in error. The bracket you thought was missing was below that.

I'm aware that its probably customisations which may have messed with the responsiveness, but cannot find which ones. Did you mean customisations in the media queries area? Did you notice which they were?

Were they obvious to you, or were you just generalising that customisations I've made must have messed up the responsiveness?

[clownfish]

Further to previous comments, I've compared the original Centric stylesheet with my own using DiffChecker - removed anything which might have had any kind of bearing on the responsive menu issue, and the problem remains.

The only styles now existing in the stylesheet are very basic color changes and a few padding changes.

The functions.php is identical to the original, as is the front-page.php. I have changed nothing else except the style.css.

I've disabled all the plugins and re-enabled them one by one with no change.

I'm at a complete loss here.

[Brad Dalton]

It looks like you have resolved this.

The only problem i saw was with the menu which now displays when the screen is reduced.

---

Tutorials for StudioPress Themes.

[clownfish]

Hi,

No, its not resolved. The menu does not change as it should on mobile devices. It does on the Centric Pro demo, although on that the primary nav is in the header right.

I would expect the menu to behave the same as the demo regardless of what position it is in. Wouldn't you?

[clownfish]

Perhaps I need to provide more clarification - I mean that the menu does not change to the three line responsive menu icon that is demonstrated on the Centric Pro demo. The css for it is on the stylesheet.

[Brad Dalton]

You'll need custom coding for that as it requires some work.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

You mean like this right? http://wpsites.net/wordpress-themes/make-genesis-primary-nav-menu-responsive-in-centric-pro/

---

Tutorials for StudioPress Themes.

[clownfish]

Hi,

Yes, I do mean that. Why would this theme, which is responsive and promoted as responsive, NOT provide the code for a responsive menu????? A menu which it clearly makes available as an option.

And why should I pay more money to another entity to find out how to remedy it???

Thats a very sorry reflection on studio press' ethics to sell a theme which is incompletely coded.

My assumption is that they probably own wpsites.net as well. If not, then whoever does is cashing in beautifully from their coding shortfalls.

Oh well, next step - learn how to make a responsive hamburger menu....

[clownfish]

For anyone facing the same issue, you can do the following to make your primary navigation responsive - to have a hamburger style menu.

Step One: In the global.js (in the js folder) change all instances of ("header .genesis-nav-menu") to ("nav .genesis-nav-menu")

Step Two: In your style.css in the Media Queries area at the bottom add the following to the media widths you want the hamburger to appear:

.nav-primary {
margin-top: 130px;
padding: 10px 0;
}

You might need to tweak the margin and padding to suit.

You might also want to add the following to other media widths. By default they are only in "(max-width: 782px)"

.responsive-menu {
display: none;
}
#responsive-menu-icon {
display: block;
}

Step Three: Follow this tutorial to have collapsible sub menu items: http://ozzyrodriguez.com/tutorials/genesis/genesis-responsive-menu-2-0/

I hope this is able to help others.

[Tom]

@clownfish Thanks for posting your changes to make the menu 'hamburger'-ready. I've used Ozzy's tut before; it works well.

You should note that the primary menu in Centric (showing below the header) actually IS mobile responsive out-of-the-box. Just in a different way than using the "hamburger icon" method. The menu responds appropriately at different screen widths, from desktop to phone. So it's a design decision for this menu in this theme, not an ethical one.

The hamburger may be ubiquitous, but it isn't necessarily appropriate everywhere: http://deep.design/the-hamburger-menu/

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[clownfish]

Hi Tom,

I appreciate your comment. I realise the menu is responsive, as is the whole theme, but not in the same way as the demo menu.

I still believe a more complete child theme would provide what is shown in the demo. If the hamburger icon method is available in the demo - and it is possible to have the menu in other places, then the same functionality should be also available.

[Tom]

Yes. It's a fair assumption. A more complete demo that displays how the design of the hidden primary nav might help too.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts