Homepage › Community Forums › Epik Theme Support › Sub Menu @ Media Only and (max-width 767px)
Tagged: Custom Menu, drop down, header right, sub menu
Good morning,
My custom menu header right sub menu is a bit funky at widths 767px and below.
I would like to have it display and function like the demo if possible.
Right now, it’s got the arrow and extra space to the right of the nav menu item (see the “more” menu item).
Here’s my site: bartenderpursuit.com
I made a few changes yesterday to accommodate my logo position and menu layout:
@media only screen and (max-width: 1023px) {
.site-title {
margin: 0 auto 0px;
}
@media only screen and (max-width: 767px) {
.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: inline-block;
}
Can anyone assist me from here?
Thank you =)
Do you mean the horizontal layout of the responsive image?
In line 3102 you added “inline-block” which removed the vertical alignment.
Hi Andy,
Thanks for your help.
If I use “block” on line 3102, I get a left-aligned menu after opening the toggle.
I would like the menu to look and operate like it does in the demo (menu items on two horizontal planes with no arrows – sub menu items appear when parent item clicked).
Wes had advised me to use “inline-block” (to balance out the changes I had made) which gave the menu the look of the demo again.
But, when I decided to ad submenu items, I got the arrow (with the extra space).
Is there a change that I can make now to revert the menu back to exactly how it functions in the demo?
Thanks again for your time.
@Serio Did you add any custom code or a plugin that adds the Arrow to your menu? It doesn’t show up that way by default, so I just wanted to make sure I know what’s causing it first. We could hide it using CSS, but it would be better to remove the source of wherever it’s coming from first.
@Andykev I was just sent your email. Yes it went horizontal in an update a long time ago. That will be changing back to Vertical in the next update. I actually need to do it for all my Themes.
I made it horizontal because a lot of users wanted it that way instead of vertical at the time. This was a little bit before the Hamburger Icon came about…..which meant users with a lot of Menu items had to scroll pretty far just to get to their content when viewing their site on mobile. Now that we have the Hamburger Icon to hide the menu, we can add the vertical menu back. So I’ll be redesigning it to vertical soon.
Hi @Wes,
Thanks for jumping in.
I haven’t added any custom code (but I have obviously made changes to existing code).
This is the only thing that might resemble custom code (?):
.header-image .site-title a {
background-size: 155px 40px !important;
min-height: 44px;
width: 100%;
margin-top: 15px;
}
The plugins I have added shouldn’t have changed anything:
-wp fastest cache
-wp smush
-genesis eNews
-ninja forms
-genesis dambuster (not activated)
-wysija newsletters
-yoast (not activated)
-wp backup (not activated)
-under construction wp (not activated)
In a perfect world, my logo would float left and the hamburger would float right on the same plain (inline) – and the menu/submenu would open (and function) how it does in the demo.
Right now though, I would be content if the arrow (and extra space) was gone – and everything looked (and functioned) like the demo.
I hope that helps.
Thanks again for the assistance.
Just a quick clarification.
As far as the statement above regarding the logo floating left with menu floating right, that would be @ widths 580px and under.
Cheers
Hi guys (and gals),
Still trying to get the nav menu (and submenu) to look and function like the demo.
Not sure how to proceed – should I begin another thread?
Any assistance would be helpful.
Cheers =)
I thought I replied to this a while ago. Maybe the post didn’t go through or something… Oh well, give me a sec and I’ll re-doit again and figure out some suggestions/workounds.
Is it possible to get a Temporary Login to your site? I’m really curious where this extra Arrow and Code is coming from that is causing the Extra Space. I can definitely get it fixed once I take a look at the backend. There seems to be something going on causing this, and I would like to make sure and remove whatever it could be.
I just realized the version that you have is actually the updated version. The demo is still using an older version of the theme. The navigation in the new version functions with the nav going downward instead of horizontal.
The older version/demo is using a completely different setup in the menu. The responsive menu file in the js
folder looks like this –
jQuery(function( $ ){
// Enable responsive menu icon for mobile
$("header .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>');
$("#responsive-menu-icon").click(function(){
$("header .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("header .genesis-nav-menu").removeAttr("style");
}
});
});
While the new version looks like this –
jQuery(function( $ ){
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');
$(".responsive-menu-icon").click(function(){
$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
$(".responsive-menu > .menu-item").removeClass("menu-open");
}
});
$(".responsive-menu > .menu-item").click(function(event){
if (event.target !== this)
return;
$(this).find(".sub-menu:first").slideToggle(function() {
$(this).parent().toggleClass("menu-open");
});
});
});
The css in the older version used ID’s – #responsive-menu-icon
Thew new version’s CSS uses Classes – .responsive-menu-icon
That’s why it’s not functioning like the demo.
It’s much easier to leave the arrows on the menu items so when your visitors are on your page, they know to click the link for more links in the sub menu. The “hovering” that you see on the demo can only be done with a mouse and is not possible on a mobile or tablet device. When someone is viewing your site on their phone/tablet, they still have to tap the link whether there is an arrow or not.
If you remove the arrow then your visitors may not know to click for more links. However, if you still prefer to remove that arrow, you can hide it by doing this –
Look around line 3138 in your css and you can either remove or comment this code out –
.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";*/
float: right;
font: normal 20px/1 'dashicons';
height: 20px;
padding: 15px 20px;
right: 0;
text-align: right;
z-index: 9999;
}
Then do the same around line 3134 and remove or comment this code out as well –
.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}
Cool.
Thank you, I’ll give it a look.
I tested the changes in chrome, and it looks perfect.
The only issue is that the submenu doesn’t activate, even with a mouse click on the menu item.
I’m cool with the arrow not being there, the menu item is called “more”, which implies to click (or touch) for more – so that’s not an issue.
Is there a way to have the submenu function with this look?
Now that I think about it, you would need the arrow (or another image) in order to be able to even open the sub menu. The sub menu can only open from the code that the arrow is using, you don’t have to use an arrow, but you’ll need to use something to show the Sub Menu can be clicked and opened. Clicking the “Menu” link itself won’t be able to open the Sub Menu. That’s just how all the latest Genesis Themes work nowadays…..including StudioPress’ themes. You can always replace that arrow with either another symbol or you could add an image for your users to click.
The space can definitely be reduced, but the code that opens the Sub Menu NEEDS to be there, and you’ll want to at least have an image or a symbol of some sort to let users know that it can be opened. If you have a blank image show instead of the arrow or any other image, people won’t know how or where to click exactly to open your Sub Menu. On mobile devices, the arrow shows up on the right side of the screen. If you have no image or arrow there, no one would be able to see how to open the Sub Menu since that’s the only space that will open it.