Hi teseo - once again thanks for your help.
This indeed worked however the search bar is now hiding the custom menu i added to my website (please see images attached). I'm quite poor with css and was wondering if there is there any chance you could help me fix this? If so thanks, I have pasted the code below.
Here is the css code for my custom menu
/* =Nav
-------------------------------------------------------------- */
#nav-trigger {
margin: -21px -10px;
padding-top:2px;
margin-bottom:-15px;
display: none;
text-align: left;
background-color: #ECE9E9;
}
#nav-trigger span {
display: inline-block;
height:20px;
padding: 6px 7px;
background-color: #ECE9E9;
color: #312F2F;
cursor: pointer;
}
#nav-trigger span:after {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 4px;
content: "";
border-left: none;
border-top: solid 5px #312F2F;
border-bottom: solid 5px #312F2F;
border-right: none; //solid 10px transparent
}
#nav-trigger span:hover {
background-color: #ECE9E9;
color: none; }
#nav-trigger span.open:after {
border-left: none;
border-top: solid 5px #312F2F;
border-bottom: solid 5px #312F2F;
border-right: none; }
nav {
margin-bottom: 30px;
font-size: 15px;
}
nav#nav-main {
background-color: #ECE9E9;
padding-top: 3px;
}
nav#nav-main ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: none; }
nav#nav-main li {
display: inline-block;
border-right: none;
padding: 0 0px; }
nav#nav-main li:last-child {
border-right: none; }
nav#nav-main a {
text-decoration: none;
display: block;
color: black;
padding: 10px 30px; }
nav#nav-main a:hover {
background-color: #45b862;
color: #fff; }
nav#nav-mobile {
position: relative;
display: none;
z-index: 9;
}
nav#nav-mobile ul {
display: none;
font-size: 0.8em;
font-family: "Tahoma", Georgia, Times, serif;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: -50px;
margin-right: auto;
text-align: left;
background-color: #312F2F; }
nav#nav-mobile li {
display: block;
height:30px;
padding: 5px 0;
margin: 0 5px;
border-bottom: none; }
nav#nav-mobile li:last-child {
border-bottom: none; }
nav#nav-mobile a {
text-decoration:none;
display: block;
color: white;
padding: 10px 20px; }
nav#nav-mobile a:hover {
background-color: #ECE9E9;
color: #312F2F; }
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
display: block; }
nav#nav-main {
display: none; }
nav#nav-mobile {
display: block; }
}
here is the menu code in my header.php file
<nav id="nav-main">
<ul>
<li> <a href="index.php?page=search&sCategory=4"><?php _e("Rooms","bender_black");?></a> </li>
<li> <a href="index.php?page=search&sCategory=6"><?php _e("Electronics","bender_black");?></a></li>
<li> <a href="index.php?page=search&sCategory=2"><?php _e("Vehicles","bender_black");?></a></li>
<li> <a href="index.php?page=search&sCategory=3"><?php _e("Books","bender_black");?></a></li>
<li> <a href="index.php?page=search&sCategory=8"><?php _e("Clothes","bender_black");?></a></li>
<li> <a href="index.php?page=search&sCategory=5"><?php _e("Services","bender_black");?></a></li>
<li> <a href="index.php?page=search&sCategory=1"><?php _e("General","bender_black");?></a></li>
</ul>
</nav>
<div id="nav-trigger">
<span><?php _e("Categories","bender_black");?></span>
</div>
<nav id="nav-mobile"></nav>
and here is the line you told me to add to make the search bar appear on all mobile pages
.main-search {
display: table;
}