Sub Menu – Display None on Mobile?

  • Resolved lilydog

    (@lilydog)


    8 years, 9 months ago

    Hi,

    Im using 1.1.0 of Pure and Simple Theme. I have been trying, without success, to disable the submenus from dropping down on a mobile view i.e. when the view changes form the full nav to the menu toggle.

    Would it be possible to add code to the CSS file to do this please? Any ideas very welcome 🙂

    Thank you in Advance!

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Theme Author Styled Themes

    (@gejay)

    8 years, 8 months ago

    Hi lilydog,

    Could you please explain more about the issue so that we could replicate actual issue and gave solution fast.

    Thanks

    Thread Starter lilydog

    (@lilydog)

    8 years, 8 months ago

    Hi,

    Thank you so much for emailing back.

    I am using your theme on my blog and the top navigation matches with my website. I have many submenus on my website nav and i have used ‘display none’ in my css to stop them from showing on a mobile view. I would like to do this on your theme.

    I have found the css for the submenu but when i add in display none, it doesn’t seem to work properly. I’m ok with css but not a master 🙂

    What css should I add in to stop the submenu form showing on a mobile view?

    Vipin Saini

    (@vipinkumarsn4)

    8 years, 8 months ago

    Hello lilydog,
    Hope you are having good time!

    May i have your site url please??
    Waiting for your return??

    Theme Author Styled Themes

    (@gejay)

    8 years, 8 months ago

    Hello lilydog,

    we hope that you got solution, if not please let us know.

    Thanks

    Thread Starter lilydog

    (@lilydog)

    8 years, 8 months ago

    Hi,

    Sorry i didn’t get an email to the reply above. No i haven’t found a way around it, i have been waiting to hear from you. heres the URL

    http://blog.pet-portraitartist.com

    Its just the same as any pure and simple theme. i just need to know where in the CSS to stop the submenu from dropping down in the mobile view.

    Surely i need to add somewhere the display none code?

    Thank you for your help.

    Theme Author Styled Themes

    (@gejay)

    8 years, 8 months ago

    Hi lilydog,

    we are visit your site and view in mobile browser too. It seems that you got the solution already, if you face any problem again, please let us know.

    Thanks

    Thread Starter lilydog

    (@lilydog)

    8 years, 7 months ago

    Hi,

    Thank you for replying. No I haven’t found a solution, I have been waiting to hear from you as I don’t know how to fix my problem. Perhaps I can explain a little further.

    If you go to my blog http://blog.pet-portraitartist.com and click ‘menu’ from a mobile or tablet device. You will see a very long drop down starting with ‘home’ and ‘gallery’. These are parent links in my navigation. Just below ‘gallery’ you will see the child links ‘all oil pet portraits’ down to ‘pet portraits videos’ then it goes back to a parent ‘happy clients’.

    What I would like to do is only have the parents showing in the dropdown – not the children. I have managed to do this in my own CSS navigation on my website http://www.pet-portraitartist.com but I do not understand how to amend the themes CSS to do the same.

    What about adding a display none tag in somewhere? Would this work? I’m sure other theme users would love this option, particularly if they have a big site with a large navigation, it can be very cumbersome to navigate in a mobile device.

    I really hope you can help 🙂 looking forward to your reply.

    Theme Author Styled Themes

    (@gejay)

    8 years, 7 months ago

    Hi lilydog,

    Yes, You can use display none property to hide unwanted element in site. We visit your site and it seems that working properly now. Please let us know if there is any problem.

    Thanks

    Awokado

    (@awokado)

    8 years, 7 months ago

    Hi StyledThemes. Could you help me in my theme?

    Thread Starter lilydog

    (@lilydog)

    8 years, 7 months ago

    Hi,

    Yes I understand that I need to use the display none tag in the CSS – please tell me exactly where?

    I have not changed anything so my site is the same as before.

    Once you tell me where to put the display none in the CSS code I will be able to change it.

    Thank you for your help.

    Theme Author Styled Themes

    (@gejay)

    8 years, 7 months ago

    Hi lilydog,

    Add the css given below in stylesheet to fix the issue:

    @media (max-width: 767px){
	u.sub-menu{
	     display:none;
	}
}

    And note that, you need to write the css using custom css plugin or child theme of the site (blog.pet-portraitartist.com/wp-admin) not (pet-portraitartist.com/).

    @awokado could you please eplain more about the issue? So that we could provide solution.

    Thanks

    Thread Starter lilydog

    (@lilydog)

    8 years, 7 months ago

    Hi,

    Thank you for your continued help 🙂 I have tried to add the code in the css file however it didn’t seem to change anything. I have been inserting it within the section of css below. I have tried in multiple places but it didn’t seem to change the menu. Can you let me know the exact place to add it to make it work please?

    Thank you 🙂 

    /*--------------------------------------------------------------
Menus - Mobile first
--------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 782px) {}
.navigation .col-md-12 {
	padding:0;
}
.site-navigation.toggled-on ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-navigation.toggled-on a {
	display: block;
	padding: 0.750rem 1.5rem;
	border-bottom: 1px solid #262826;
	background: #4d4d4d;
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #b8b8b8;
	font-size: 0.813rem;
}
.site-navigation.toggled-on a:hover {
	color: #FFF;
	text-decoration: none;
}
.site-navigation.toggled-on ul a { width: 100%; }
.site-navigation.toggled-on ul a { padding-left: 1.250rem; }
.site-navigation.toggled-on ul ul a { padding-left: 2.50rem; }
.site-navigation.toggled-on ul ul ul a { padding-left: 3.750rem; }
.site-navigation.toggled-on ul ul ul ul a { padding-left: 5rem; }
.site-navigation.toggled-on ul ul ul ul ul a { padding-left: 6.250rem; }

.primary-navigation .nav-menu {
	display: none;
}
.primary-navigation.toggled-on .nav-menu {
	display: block;
}
.toggle-container {
	display: block;
	height: 3.188rem;
	background: #789993;
	text-align: center;
}

/* Mobile menu button */
.menu-toggle {
	border: 0;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: auto;
	margin-top: 0.375rem;
	padding: 0.563rem 1.25rem;
	text-transform: uppercase;
	background-color: #7a8e8d;
	color: #FFF;
	font-size: 0.875rem;
}
.menu-toggle:active,
.menu-toggle:focus,
.menu-toggle:hover {
	color: #fff;
	background-color: #3c3c3c;
	outline: 0 dotted;
}

/* Menus - Primary Navigation */

@media screen and (min-width: 783px) {

	.primary-navigation .menu-toggle {
		display: none;
	}
	.site-navigation ul {
		list-style: none;
		margin: 0;
		padding:0;
		text-align: center;
		font-size: 1rem;
		text-transform: uppercase;
	}
	.primary-navigation ul.nav-menu {
		display: block;
	}
	.site-navigation a {
		color: #595a67;
		display: block;
		text-transform: normal;
		text-decoration: none;
	}
	.primary-navigation li {
		border: 0;
		display: inline-block;
		height: 3.188rem;
		line-height: 3.188rem;
		position: relative;
		text-align: left;
	}
	.primary-navigation li a {
		display: inline-block;
		padding: 0 0.75rem;
		white-space: nowrap;
		color: #fff;
	}	

	/* Submenus */

	.primary-navigation li li > a {
		text-transform: uppercase;
		font-size: 0.813rem;
		border-bottom: 1px solid #363535;
		color: #b6b6b6;
	}
	.primary-navigation ul ul {
		background-color: #4d4d4d;
		float: left;
		margin: 0;
		position: absolute;
		top: 3.188rem;
		left: -999rem;
		z-index: 99999;
		display:none;
	}
	.primary-navigation ul ul ul {
		left: -999rem;
		top: 0;
	}
	.primary-navigation li li {
		border: 0;
		display: block;
		height: auto;
		line-height: 1.1;
	}

	.primary-navigation ul ul a,
	.primary-navigation li li li a {
		padding: 0.750rem;
		white-space: normal;
		width: 13.750rem;
	}
	.primary-navigation li a:hover,
	.primary-navigation li:hover a {
		background: #4d4d4d;
	}
	.primary-navigation li li:hover > a,
	.primary-navigation li li.focus > a,
	.primary-navigation ul ul a:hover,
	.primary-navigation ul ul li.focus > a {
		background-color: #4d4d4d;
	}
	.primary-navigation ul li:hover > ul,
	.primary-navigation ul li.focus > ul {
		left: auto;
		display:block;

	}
	.primary-navigation ul ul li:hover > ul,
	.primary-navigation ul ul li.focus > ul {
		left: 100%;
	}
	.site-navigation a:hover,
	.site-navigation .current-menu-item > a {
		color: #ffffff;
	}
	.site-navigation .current-menu-item > a,
	.site-navigation .current-menu-ancestor > a {
		background-color: #4d4d4d;
		color: #fff;
	}
	.home.current-menu-item a {
		background: none;
	}

}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

@media (max-width: 767px) {
	  .visible-xs {
		display: block !important;
	  }
	  table.visible-xs {
		display: table;
	  }
	  tr.visible-xs {
		display: table-row !important;
	  }
	  th.visible-xs,
	  td.visible-xs {
		display: table-cell !important;
	  }
	.featured-image-style1,
	.featured-image-single {
		margin: 1.250rem 0;
		float: none;
		text-align: left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
  table.visible-sm {
    display: table;
  }
  tr.visible-sm {
    display: table-row !important;
  }
  th.visible-sm,
  td.visible-sm {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
  table.visible-md {
    display: table;
  }
  tr.visible-md {
    display: table-row !important;
  }
  th.visible-md,
  td.visible-md {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md-inline-block {
    display: inline-block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
  table.visible-lg {
    display: table;
  }
  tr.visible-lg {
    display: table-row !important;
  }
  th.visible-lg,
  td.visible-lg {
    display: table-cell !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline {
    display: inline !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg-inline-block {
    display: inline-block !important;
  }
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
    Theme Author Styled Themes

    (@gejay)

    8 years, 7 months ago

    Hi lilydog,

    We have fix the issue in latest version, so please update the theme.

    Thanks

    Thread Starter lilydog

    (@lilydog)

    8 years, 7 months ago

    Hi, Thank you, there seems to be an anomaly with the drop downs in Chrome on the computer browser. Not sure if this is showing at your end. I have changed themes until there is a fix as any drop down pushes the navigation along to the right and left. So sorry to bring you this news.

    Theme Author Styled Themes

    (@gejay)

    8 years, 7 months ago

    Hi lilydog,

    The theme has been already updated with the bug fixing, so please update your theme.

    Thanks

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • The topic ‘Sub Menu – Display None on Mobile?’ is closed to new replies.