Button menu

[admin1]

When button menu is viewed on phone, it is stretched towards right side and is longer than phpbb forum.

Help

Go here in FTP: ./ext/dmzx/buttonmenu/styles/prosilver/theme

Open the buttonmenu.css file and add the code give here: viewtopic.php?p=10402#p10402

Purge the cache after

I need a help here.... did I enter the codes correctly ?

Code: Select all

@media screen and (max-width: 700px), only screen and (max-device-width: 700px) {
   #menu {
		max-width: 700px;
		min-width: 300px;
		width: auto;
    		height: auto;
		margin-left: -5px;
		margin-right: -5px;
		position: relative;
		border-radius: 0px;
	}
}

#menu {
  margin:  auto;
  height: 30px;
  max-width: 1180px;
  min-width: 625px;
}

#menu .menu_corner-left {
  display: block;
  width: 15px;
  height: 30px;
  float: left;

[martin]

If trying to run it on 3.3 it will need a real css update.

[ssl]

I would put the additional code at the end of the CSS file

[ssl]

If trying to run it on 3.3 it will need a real css update.

With this code here is the rendering on mobile version

Capture d’écran 2021-01-08 à 18.36.40.png

Better like nothing but not optimum of course

[ssl]

Please delete

[martin]

This css is just wrong look at it @media screen and (max-width: 700px), only screen and (max-device-width: 700px) no min and max just max and both the same size lol

Code: Select all

@media screen and (max-width: 700px), only screen and (max-device-width: 700px) {
   #menu {
		max-width: 700px;
		min-width: 300px;
		width: auto;
    		height: auto;
		margin-left: -5px;
		margin-right: -5px;
		position: relative;
		border-radius: 0px;
	}
}

#menu {
  margin:  auto;
  height: 30px;
  max-width: 1180px;
  min-width: 625px;
}

#menu .menu_corner-left {
  display: block;
  width: 15px;
  height: 30px;
  float: left;

[ssl]

Since July 2016: viewtopic.php?p=10402#p10402

[martin]

Since July 2016: viewtopic.php?p=10402#p10402

Yes i know and it's 100% plain wrong.

[admin1]

Please delete

as per expertise advice, I have deleted the codes

[admin1]

Since July 2016: viewtopic.php?p=10402#p10402

Yes i know and it's 100% plain wrong.

deleted......completely

[martin]

Replace with this

Code: Select all

#menu {
  margin:  auto;
  height: 30px;
}

#menu .menu_corner-left {
  display: block;
  width: 15px;
  height: 30px;
  float: left;
}

#menu .menu_corner-right {
  display: block;
  width: 10px;
  height: 30px;
  float: right;
}

#menu .inner { 
  margin-top: 5px; 
} 

#menu #top-search {
  height: 30px;
  width: 160px;
}

#menu #top-search .menu_search {
  background-color: #FFFFFF;
  border: medium none;
  float: left;
  left: 25px;
  position: relative;
  top: 8px;
  width: 115px;	
}

#menu ul {
  list-style: none;   
  height: 30px;  
  margin: 0 0 10px 0;
  padding: 0;
}

#menu ul li {
  display: block;
  height: 30px;
}

#menu ul li a {
  display: block;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 8px 13px 6px 13px;
}

#menu ul ul {
  display: none;
  position: absolute;
  z-index: 1000;
  list-style: none;
  height: 30px;      
}

#menu ul ul li {
  display: block;
  min-width: 150px;
  height: 30px;    
  border-top: 1px solid transparent;
}

#menu ul ul li a {
  display: block;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 8px 13px 6px 13px;
}

/* IE 9 hack */     
#menu ul ul li:first-child {
  border-top: 2px solid transparent\9;
}

.headerbar #search-box {
  display: none !important;
}

.navbar #search-box{
  box-shadow:none;
}

.headerbar {
	border-radius: 8px 8px 0 0;
}

@media all and (min-width : 350px) and (max-width : 700px) {
   #menu {
	max-width: 700px !important;
	min-width: 350px !important;
	width: auto;
        height: auto;
	margin-left: -5px;
	margin-right: -5px;
	position: relative;
	border-radius: 0px;
	}
}

@media all and (min-width : 350px) and (max-width : 700px) {
   #top-search {
   	display:none;
   }
}

Demo https://www.martins-phpbb-test.com/ shrink the screen to mobile size.

[Sniper_E]

Replace the @media css at the bottom with this

Code: Select all

@media all and (min-width : 350px) and (max-width : 700px) {
	#menu {
		max-width: 700px !important;
		min-width: 350px !important;
		width: auto;
        	height: auto;
		margin-left: -5px;
		margin-right: -5px;
		position: relative;
		border-radius: 0px;
	}
	#top-search {
		display:none;
	}
}

[admin1]

Replace with this

Code: Select all

#menu {
  margin:  auto;
  height: 30px;
}

#menu .menu_corner-left {
  display: block;
  width: 15px;
  height: 30px;
  float: left;
}

#menu .menu_corner-right {
  display: block;
  width: 10px;
  height: 30px;
  float: right;
}

#menu .inner { 
  margin-top: 5px; 
} 

#menu #top-search {
  height: 30px;
  width: 160px;
}

#menu #top-search .menu_search {
  background-color: #FFFFFF;
  border: medium none;
  float: left;
  left: 25px;
  position: relative;
  top: 8px;
  width: 115px;	
}

#menu ul {
  list-style: none;   
  height: 30px;  
  margin: 0 0 10px 0;
  padding: 0;
}

#menu ul li {
  display: block;
  height: 30px;
}

#menu ul li a {
  display: block;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 8px 13px 6px 13px;
}

#menu ul ul {
  display: none;
  position: absolute;
  z-index: 1000;
  list-style: none;
  height: 30px;      
}

#menu ul ul li {
  display: block;
  min-width: 150px;
  height: 30px;    
  border-top: 1px solid transparent;
}

#menu ul ul li a {
  display: block;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 8px 13px 6px 13px;
}

/* IE 9 hack */     
#menu ul ul li:first-child {
  border-top: 2px solid transparent\9;
}

.headerbar #search-box {
  display: none !important;
}

.navbar #search-box{
  box-shadow:none;
}

.headerbar {
	border-radius: 8px 8px 0 0;
}

@media all and (min-width : 350px) and (max-width : 700px) {
   #menu {
	max-width: 700px !important;
	min-width: 350px !important;
	width: auto;
        height: auto;
	margin-left: -5px;
	margin-right: -5px;
	position: relative;
	border-radius: 0px;
	}
}

@media all and (min-width : 350px) and (max-width : 700px) {
   #top-search {
   	display:none;
   }
}

Demo https://www.martins-phpbb-test.com/ shrink the screen to mosbile size.

You got it all again. Well done. But add some pixel to your edit so that the button touches the left and right side of the screen. Something small is missing and I know you will do it

[martin]

There images not css.

[ssl]

Hi
Having this kind of CSS code for the responsive would be the best

Capture d’écran 2021-01-09 à 12.00.00.png