Genesis Responsive Menu Icon

This topic has 29 replies, 3 voices, and was last updated 8 years, 7 months ago by bonniedavid.

Viewing 30 posts - 1 through 30 (of 30 total)

Author

Posts
September 22, 2015 at 11:56 am #16439
bonniedavid
Customer
Site: http://www.mediaelevate.com

I don’t want Genesis Responsive Menu Icon in my navigation menu.

Should it be there? What is its function?

How do I have the Menu show up under my logo?

I wanted to make changes to the look of my primary nav. So I copied and pasted the code below from the Minimalist theme.

/* Site Navigation
—————————————————————————————————- */
.epik-red .nav-primary {
border-top: double #eee;
border-bottom: double #eee;
width: 1250px;
}

.epik-red .genesis-nav-menu {
clear: both;
line-height: 1;
padding-bottom: 20px;
text-align: center;
width: 100%;
}

.epik-red .genesis-nav-menu a {
color: #333;
display: block;
font-size: 30px;
font-weight: 600;
margin: 20px;
}

.epik-red .genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
color: #e00000;
}

How do I make the menu look better on all screen sizes? Why do I need to have the responsive menu icon?

Please advise

Thanks

Bonnie
September 23, 2015 at 12:15 pm #16482
kronos
Customer
It looks like your code is off/mixed up. By default, the icon is only supposed to show up IF you have a Menu, and IF the site is viewed in a smaller/resized browser (mobiles, tablets, etc).

You can add display: none; to have it removed –
```
.responsive-menu-icon {
    display: none;
}
```
October 1, 2015 at 11:20 pm #16503
bonniedavid
Customer
.responsive-menu-icon {
cursor: pointer;
display none;
margin-bottom: 10px;
}

This is what I have in the theme’s css. I guess it is meant to be there.
October 2, 2015 at 12:52 am #16504
bonniedavid
Customer
I do have a menu. http://www.mediaelevate.com

This is tricky.

The original css shows the following:

/* Responsive Menu
——————————————— */

.responsive-menu-icon {
cursor: pointer;
display none;
margin-bottom: 10px;
}

.responsive-menu-icon::before {
color: #eee;
content: “\f333″;
font: normal 32px/1 ‘dashicons’;
margin: 0 auto;
}

But when I use Chrome’s Inspect Element on the front-end, I see only the following code:

media=”all”
.responsive-menu-icon {
cursor: pointer;
margin-bottom: 10px;
}

Why is Wes not responding to my inquiry. After all, he is the developer of the Epik Theme.

Thanks
October 2, 2015 at 12:53 am #16505
Andykev
Customer
You are missing one thing, the “:”
```
/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
	margin-bottom: 10px;
}
```
Add that and the “hamburger” icon menu disappears. Its around line 2276 of your CSS

Careful about cut and paste from one theme to another, sometimes the theme CSS requires a file in your Theme PHP. Didn’t look at all your code, just the problem you asked about, making the icon go away.

Do you want it to appear on Iphone, or tablet sized displays?
October 2, 2015 at 1:06 am #16506
bonniedavid
Customer
I fixed it. Somehow there was no colon.

display none;

Once I added the colon, the icon is gone. But I see no icon when I test http://www.mediaelevate.com in
http://www.studiopress.com/responsive/

There is no cut/paste from another theme. Wes mentioned that we can download the Theme’s demo content to make the home page look like the Epik demo version.

That is what I did.

Thanks
October 2, 2015 at 1:10 am #16507
Andykev
Customer
And the other questions about the “Genesis Icon” menu (AKA the “hamburger”). It is set to trigger below a certain screen size. The code makes your regular menu vanish and the “hamburger” is shown in place of your regular menu. Not all themes do this.

My Legacy theme did not have this feature, so when the screen was reduced (like viewing on a smart phone or Ipad) the normal menu simply reordered itself and was present in text form. I wanted it to be like the Epik theme and when the screen was reduced, the hamburger appeared. Then on a smart phone you can tap it and pull up your full menu in a drop down list.
October 2, 2015 at 1:15 am #16508
bonniedavid
Customer
My menu has not vanished. http://www.mediaelevate.com

I only fixed it.

display: none;

I added the colon. Now I see no responsive icon.

When I test the site http://www.studiopress.com/responsive/, there is no icon. And the menu appears horizontally. On the smaller screen sizes, you have to scroll to the right to see it.
October 2, 2015 at 1:32 am #16509
Andykev
Customer
Something happened to the CSS in your theme. OK here is what is missing:

@media
```
*
Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */
 only screen and (max-width: 1180px) {
```
In the bottom section of your CSS dealing with Media Queries…

it should be like this:
```
/*
Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */

@media only screen and (max-width: 1180px) {
```
So the “@media” is missing before the code on the following lines of your css:

4076
4176
4367
4418

That is why your menu is not working correctly when the screen is resized for smaller screens.
Please put that back in and it fixes it, and will test ok.
October 2, 2015 at 1:50 am #16510
bonniedavid
Customer
I added @media and I updated the css but the Epik theme does not register it.

After I update the css, the @media does not show up.
October 2, 2015 at 1:53 am #16511
Andykev
Customer
You are changing the css in your Dashboard – Appearance – Editor?

Open the style.css

fix the @media part missing from the bottom and SAVE.

If you try to fix it on the web browser “inspect element” it will not work. That is only to try stuff and not change your actual css. Sorry if this is a silly reply to you, but that sounds like what happened.

Whenever you actually change your CSS or any code, be sure you made a COPY and save it as a text file. I learned this the hard way when I was trying to fix stuff, and you are sometimes rewarded with the WSOD (white screen of death). Simple omissions or typos can KILL your site..like a missing “:” made the menu not work for you.

I tried the “FIX” on your website using “inspect element” and going to your CSS. However refreshing the screen reverts back to what you have in your website file.
October 2, 2015 at 1:59 am #16512
bonniedavid
Customer
I am referring to the Editor in Appearance.

I normally make the changes in Edit CSS in Appearance.

The theme does not register @media.

Thanks
October 2, 2015 at 2:13 am #16513
Andykev
Customer
Confusing. In Epik, I can go to Dashboard-Appearance-Editor. Make sure you’re editing the EPIK theme from the upper drop down. Then go to the Style.css and scroll to the bottom section and you can add the “@media” to the areas in question…then SAVE. Don’t know why it isn’t working for you.
October 2, 2015 at 2:24 am #16514
bonniedavid
Customer
Wes is the developer and yet he does not seem to respond accordingly. He is the one who came up with the theme.

I have implemented the changes in the Editor in Appearance. And after clicking the update at the bottom, I see the @media is missing.

There is a reason and only Wes can answer because he is the developer.
October 2, 2015 at 2:43 am #16515
Andykev
Customer
Unless you have some plugin, or something which is preventing you from editing a file, anyone logging into your website control panel and going to “EDITOR” will be able to modify the theme files. I applied the above “@media” to your theme using the “inspect element” and it worked like a charm. Unfortunately those changes vanish once you refresh the browser.

I assume you’ve cleared your Cache file or similar if you are using one? Other than that, changing your style.css should be no problem.

The only suggestion is to make a temporary login for access. If you only want Wes, ok. There are several good customers here who have given me, and others, answers to their questions. Actually Wes relies on this “community” for that purpose. Anyway…I hope you figure it out as to why you cannot edit.
October 2, 2015 at 3:02 am #16516
bonniedavid
Customer
The Epik theme is a responsive theme. The style.css did not include @media.

You suggested it and I incorporated the changes but each time I update the style.css in the Editor, the @media goes missing.

I have Responsive Header Plugin and many other plugins registered.

I need to know what is standing in the way before I can resolve the issue.

Thanks
October 2, 2015 at 3:10 am #16518
Andykev
Customer
Did you change the j.querry, or any PHP files regarding the menu or media?

Here is the original EPIK style.css Note it contains the @media in the bottom section.
```
/*
Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape)
--------------------------------------------- */

@media only screen and (max-width: 1180px) {

	.wrap,
	.site-header {
		max-width: 960px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 740px;
	}

	.content,
	.site-header .widget-area {
		width: 620px;
	}

	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content,
	.content-sidebar-sidebar .content {
		width: 400px;
	}

	.sidebar-primary,
	.title-area {
		width: 300px;
	}
	
	.hf1,
	.hf3,
	.hf4,
	.hf5,
	.hf6,
	.hf7,
	.hf8,
	.hf9,
	.hf14 {
		/*background-attachment: scroll;*/
		background-position: top;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		background-size: auto;
	}

}

/* iPads (portrait)
--------------------------------------------- */

@media only screen and (max-width: 1023px) {

	.content,
	.content-sidebar-sidebar .content,
	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.site-header .widget-area,
	.title-area,
	.wrap {
		width: 100%;
	}
	
	.site-header,
	.nav-primary .wrap,
	.nav-secondary .wrap,
	.slider .wrap,
	.welcome .wrap,
	.home-feature-bg .wrap,
	.home-feature-bg-alt .wrap,
	.home-feature-bg-dark .wrap,
	.footer-widgets .wrap {
		width: 90%;
	}
	
	.title-area {
		padding: 16px 0;
	}
	
	.header-image .site-header,
	.header-image .site-header .wrap {
		background-position: center top !important;
	}
	
	.site-header .widget-area {
		text-align: center;
	}

	.site-inner {
		padding-left: 5%;
		padding-right: 5%;
	}

	.site-inner {
		background: none;
	}
	
	.nav-primary {
		background-repeat: repeat-y;
	}

	.genesis-nav-menu li,
	.genesis-nav-menu > .right,
	.site-header ul.genesis-nav-menu,
	.site-header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	.site-description,
	.site-header hgroup,
	.site-header .search-form,
	.site-title {
		text-align: center;
	}
	
	.genesis-nav-menu .menu-item {
		display: inline-block;
		float: none;
	}

	.genesis-nav-menu a,
	.genesis-nav-menu > .first > a,
	.genesis-nav-menu > .last > a { }
	

	.site-header .search-form {
		margin: 16px auto ;
	}

	.sidebar .widget.enews-widget {
		padding: 40px;
	}
	
	.wp-caption {
		width: 100% !important;
	}
	
	.footer-widgets .widget {
		margin-bottom: 40px;
	}

}

/* iPad/Tablets (portrait and landscape)
--------------------------------------------- */

@media only screen and (max-width: 960px) {

	.feature-margin {
		margin: 0;
	}

}

/* iPhones (portrait and landscape)
--------------------------------------------- */

@media only screen and (max-width: 767px) {

	.home-feature-3,
	.home-feature-4,
	.home-bottom-sidebar-1,
	.home-bottom-sidebar-2,
	.home-bottom-sidebar-3,
	.home-bottom-sidebar-4,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}
	
	.genesis-nav-menu.responsive-menu {
		display: none;
	}

	.nav-primary .responsive-menu-icon {
		margin-top: 20px;
	}

	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}

	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}

	.genesis-nav-menu.responsive-menu li.current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover {
		border: none;
		display: block;
		padding: 20px;
		text-transform: none;
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;	
	}

	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}

	.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;
	}

	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
	}

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu {
		display: none;
	}

	.genesis-nav-menu.responsive-menu .sub-menu {
		background-color: rgba(0, 0, 0, 0.05);
		left: auto;
		opacity: 1;
		position: relative;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 100%;
		z-index: 99;
	}

	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		margin: 0;
	}

	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		padding: 20px;
		position: relative;
		text-transform: none;
		width: 100%;
	}

	.genesis-nav-menu.responsive-menu .current-menu-item > a,
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu > li.menu-item-has-children:hover > a,
	.genesis-nav-menu.responsive-menu a:hover {
		background: none;
	}

	.site-header .genesis-nav-menu.responsive-menu .current-menu-item > a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a:hover,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu > .menu-item-has-children:before,
	.site-header .genesis-nav-menu.responsive-menu > li:hover > a,
	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #fff;
	}

	.nav-primary .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu {
		background-color: rgba(255, 255, 255, 0.05);
	}
	
	.feature-left,
	.feature-right {
		width: 45%;
	}
	
	.home-feature-10,  
	.home-feature-12 {
		width: 48%;
	}
	
	.home-feature-11,
	.home-feature-13 {
		float: right;
		margin: 0;
		width: 48%;
	}
	
	.home-feature-12 {
		clear: both;
	}

	.search-form {
		width: 80%;
	}
	
	.content .portfolio {
		width: 48%;
	}
	
	.content .portfolio .post-image {
		width: 100%;
	}
	
	.home-feature-10 img, 
	.home-feature-11 img, 
	.home-feature-12 img, 
	.home-feature-13 img {
		width: 100%;
	}
	
	.plan-col, 
	.plan-col-popular {	
		float: none;
		margin: 0 auto 40px;	
		width: 80%;
	}

}

@media only screen and (max-width: 580px) {

	.home .wrap {
		text-align: center;	
	}
	
	.site-header .wrap {
		width: 90%;
	}
	
	.welcome-feature-1, 
	.welcome-feature-2,
	.welcome-feature-3,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-1,
	.home-feature-2,
	.home-feature-3,
	.home-feature-4,
	.home-feature-5,
	.home-feature-6,
	.home-feature-7,
	.home-feature-8,
	.home-feature-9,
	.home-feature-10,
	.home-feature-11,
	.home-feature-12,
	.home-feature-13,
	.home-feature-14 {
		margin: 0 auto;
	    text-align: center;
	    width: 100%;
	}
	
	.feature-left {
		float: none;
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
	
	.feature-right {
		float: none;
		margin: 40px auto 0;
		text-align: center;
		width: 100%;
	}

}

@media only screen and (max-width: 480px) {

	.site-header {
		width: 100%;
	}
	
	.content .portfolio {
		text-align: center;
		width: 100%;
	}
	
	.content .portfolio .post-image {
		width: 100%;
	}
	
	.content .portfolio .more-link {
		margin: 20px auto 0;
		padding: 6px;
		width: 60%;
	}
	
}
```
This is the part of the .css which handles the resizing of the menu on small screens. You also have to have the functions properly configured as well.

This must be in your Theme Functions PHP file:
```
//* Enqueue Scripts/Styles
add_action( 'wp_enqueue_scripts', 'epik_enqueue_scripts_styles' );
function epik_enqueue_scripts_styles() {

	wp_enqueue_script( 'epik-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700', array(), PARENT_THEME_VERSION );
	wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
	
}
```
October 2, 2015 at 3:11 am #16519
bonniedavid
Customer
I am going to upload the original style.css that has @media into the cPanel. I don’t know why the Editor in the Appearance does not have it.

Something must have happened along the way.

Thanks
October 2, 2015 at 3:17 am #16520
bonniedavid
Customer
Now I see @media. When I test the site http://www.studiopress.com/responsive/, there are no major changes.
October 2, 2015 at 3:20 am #16521
bonniedavid
Customer
What changes I need to make to php or .js? Whee is the js. I need to access the cPanel from my hosting site A2 Hosting.

I can’t see it in the Editor in Appearance.
October 2, 2015 at 4:22 am #16522
Andykev
Customer
No, do not change those files. I only asked if you did. Those are in your functions.php.

I had the .css changes working and the little hamburger showed up properly. I just checked and now it is not showing..so unsure. Too late tonight to think clearly…
October 2, 2015 at 6:32 pm #16525
Andykev
Customer
Your header logo inmage also is getting cut off when it shrinks to smaller screens.

Adding this:
```
.header-image .site-title a {
background-size: contain !important;
}
```
It fixes that problem. I am still looking at your code. I FOUND IT!
```
.responsive-menu-icon::before {
	color: #999;
	content: "\f333";
	font: normal 32px/1 'dashicons';
	margin: 0 auto;
}
```
You had color set as #fff which is why it is not showing up! I changed it to #999 and voila!
October 2, 2015 at 8:10 pm #16526
bonniedavid
Customer
Thanks so much for your help. It worked. One question?

http://www.studiopress.com/responsive/

When I test the site http://www,mediaelevate.com, I see a huge gab between the menu items. Is this normal.
October 2, 2015 at 9:04 pm #16527
Andykev
Customer
No it is not normal. You have changed the look of your site from the original theme. The responsive menu is different.

If you remove this at line 1338
```
.welcome-features .wrap {
    margin: 0 auto;
    overflow: hidden;
    padding: 120px 0 60px;
    width: 1140px;
}
```
It lessens the gap between the header and the lower content. That container (the area being wrapped) is not being used in your modified theme.
October 2, 2015 at 9:12 pm #16528
Andykev
Customer
You also need to fix this on line 4305:
```
	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #999;
	}
```
On your theme “responsive menu” (small screens) the hover does not work. Why? You set the hover color to white so moving the mouse over it causes the text to disappear. The white color is the correct color for the “theme color” you selected (RED) but you modified elsewhere, so changing the background color to white (you removed the red), thus you also need to change the text to a contrasting color.
October 2, 2015 at 9:34 pm #16529
Andykev
Customer
Ficed it. Your “special modification” you added to the “epic red” css, need to change it to this:
```
.epik-red .genesis-nav-menu a {
	color:#3c3e3f;
	font-family:'Helvetica W01 Light Cn',sans-serif;
	font-size:15px;
	font-weight:400;
	letter-spacing:1px;
	text-transform:uppercase;
	vertical-align:top;
	margin-top:10px
}
```
The key part is ” margin-top:10px “. You had it at 110 which did lower your menu down from the page top on a regular screen, but that spacing as coded carried over to the responsive menu, giving you unacceptable space between the menu items. Looks good now.
October 2, 2015 at 10:43 pm #16531
bonniedavid
Customer
Okay. Just keep in mind that I use Edit CSS to make modifications. I don’t touch the actual style.css unless I need to remove something.

I mentioned to you that Wes said that we can download the demo files:

A quick and easy way to setup the Homepage demo is to download and install a plugin called “Widget Importer & Exporter” – https://wordpress.org/plugins/widget-importer-exporter/ Once you install this plugin, it will allow you to import a file that will automatically fill in the same widget content from the demo homepage to the widgets of your own site. So by using this plugin, you won’t need to copy and paste the text and html code used from the demo since the plugin will automatically add it in your widgets for you.

We recommend this plugin because the default WordPress XML file doesn’t import Widget content. It will only import Posts, Pages, User info, etc, but it doesn’t include widget content. So in order to install the widgets all in “One Click“, you can use the plugin above and it will take care of the entire process for you.

You can download the Epik Demo widgets file here – https://www.dropbox.com/s/ezljifs7mtg9l38/demo.appfinite.net-epik-widgets.wie?dl=0 Import this file with the plugin.
October 2, 2015 at 10:48 pm #16532
bonniedavid
Customer
I have not even configured the welcome features. I am not removing that line yet.

I was referring to the gap between the menu items. Nothing to do with the welcome features.

My site is not fully configured. Thanks
October 3, 2015 at 12:02 am #16533
Andykev
Customer
Ok Bonnie That is the above solution to your responsive menu, the incorrect text colors, and the line spacing to the responsive menu.

Good Luck and Happy Computing!
October 3, 2015 at 1:21 am #16534
bonniedavid
Customer
Thanks Andykev. I have implemented the changes. Thanks for your help.

I will post questions as I go along.
Author

Posts

Viewing 30 posts - 1 through 30 (of 30 total)

The topic ‘Genesis Responsive Menu Icon’ is closed to new replies.