Making mainnav visible starting screen width 900px

Hello there,

In order to achieve that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin?

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

  .site-header{
    background: transparent;
  }

  .btn-menu{
    display: none;
    border: 2px solid red;
  }  

  #mainnav{
    display: block;
  }  

}  

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

  #mainnav{
    display: none;
  }

  .btn-menu{
    display: block;
  }

}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

I have the same problem. Try to fix with the CSS code from Kharis but it doesn’t change the view result.

The menu (on 1024*768px) disappear after a few second and doesn’t appear until 900px view.

Can solve this?

Thanks

Hi @marcoerasmo,

Try the following:

* Clear your browser’s cache
* Clear your site’s cache if you have cache plugin like W3 Total Cache being activated

Hi @kharis,

tried to clear cache as you told but the view doesn’t change.
You can check what I mean on my website : https://www.cs.erasmo.it
As you can see under 1038px the menu disappear until 912px.
I fixed the background menu trasparent on both view but there is a gap white.

Can you help me?

Thanks

Hi @marcoerasmo,

Could you please try to update the previous code to the following?

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

  .site-header{
    background: transparent !important;
  }

  .btn-menu{
    display: none;
  }  

  .mainnav{
    display: block !important;
    background: transparent !important;
  }  

  .mainnav ul.menu > li{
    position: relative !important;
    padding: 0px 12px !important;
    display: inline-block !important;
    float: left !important;
    border-top: none !important;
  }  

  .btn-submenu{
    display: none;
  }

  .mainnav ul.menu .sub-menu{
    display: block !important;
		width: 180px !important;
		position: absolute !important;
		top: 100% !important;
		left: -999em !important;
		opacity: 0 !important;
		visibility: hidden;
		-webkit-border-radius: 0 0 2px 2px;
		   -moz-border-radius: 0 0 2px 2px;
			 -o-border-radius: 0 0 2px 2px;
				border-radius: 0 0 2px 2px;
	    -webkit-transition: all 0.3s ease;
	       -moz-transition: all 0.3s ease;
	        -ms-transition: all 0.3s ease;
	         -o-transition: all 0.3s ease;
	            transition: all 0.3s ease;  

  }

  .mainnav ul.menu .sub-menu .sub-menu{
    top: 0 !important;
  }  

	.mainnav ul.menu li:hover > ul.sub-menu {
	    opacity: 1 !important;
	    padding-top: 10px !important;
	    visibility: visible !important;
      display: block !important;
	    left: auto !important;
	    -webkit-transition: all 0.3s ease;
	       -moz-transition: all 0.3s ease;
	        -ms-transition: all 0.3s ease;
	         -o-transition: all 0.3s ease;
	            transition: all 0.3s ease;
	}  

	.mainnav ul.menu li:hover > ul.sub-menu .sub-menu{
     left: 100% !important;
     padding-top: 0 !important;
  }  

}  

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

  .btn-menu{
    display: block;
  }

}

Let me know how it works.

Best,
Kharis

Hi @kharis,

tried to update your CSS but it doesen’t work correctly.
I need desktop view with white opacity on sticky backround menu. In your, when you scroll the page, the background opacity is trasparent.
In general I need to have two types of view, one of these is desktop view and it has to appear upper than 900px, the other view is the mobile view and has to has to appear under 900px.
You can check my mobile view preferences on the website, these appear correclty only under 612px.
Furthermore upper 779px the menu preferences change, the slash menu lost my preference goes to the right and the logo to left.
It also appear a white gap until 1035px, I set up the slider image overlay.

Do you know how to fix it correctly?

Thanks

Hi @marcoerasmo,

Could you please refer here https://athemes.com/forums/topic/modify-sydney-responsive-menu-breakpoint/? Similar question has been answered.

Best,
Kharis

Thanks @kharis