Menu not available on iphone

aapcdirectltd · February 2016

Hi

here is my website http://rapidremovalsandcollections.co.uk/

the drop down menu on the top is not available on iphone !

Albert · February 2016

Hi,

yes, it is but it's the same color as background. You can change it's color with:

#Top_bar a.responsive-menu-toggle { color: #000 !important; }

aapcdirectltd · February 2016

http://oi66.tinypic.com/2usjv5u.jpg

the menu toggle is available and visible but the link is not working!

Albert · February 2016

If the link does not work, you need to deactivate all plugins first and remove all custom css. If this won't help, then we recommend to re-install theme files but thru FTP only.

aapcdirectltd · February 2016

I found the problem!

It was in CSS !!

#Top_bar #logo { position: absolute;}

causes the menu toggle in mobile to not work! however when i remove it from my CSS, my menu text will be moved a bit down.

do you have any replacement CSS in my case to use?

Here is the website : http://rapidremovalsandcollections.co.uk/

and CSS Code I am using now :

body { font-style: italic; }

h1, h2, h3, h4, h5, h6 { font-style: normal; }

h2 { letter-spacing: 5px; }

h3 { font-weight: normal; font-style: italic; }

h4 { font-weight: bold; letter-spacing: 5px; }

h5 { font-weight: normal; font-style: italic; letter-spacing: 4px; }

.section-border-bottom { border-bottom: 0px solid rgba(0,0,0,.1); }

.dark-text-shadow { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); }

.header-fixed #Top_bar, #Top_bar.is-sticky { box-shadow: 0 0 0 0 !important; border-bottom: 0px solid rgba(255,255,255,.2); }

/* Header */

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

#Top_bar #menu { background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif") !important; }

}

#Header .top_bar_left,

.header-fixed #Top_bar,

#Top_bar #menu { background-color: rgba(0,0,0,.3); }

#Top_bar .menu > li > a { letter-spacing: 3px; font-style: normal; }

/* Footer */

#Footer { display: none; }

/* Shortcodes */

.hover_box { text-align: center; }

.hover_box .hover_box_wrapper { display: inline-block; }

.offer .offer_li .desc_wrapper .title h3 { font-size: 42px; line-height: 42px; font-family: Lato; font-style: normal; font-weight: 300; letter-spacing: 5px; }

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

.offer .offer_li .desc_wrapper { width: 90%; margin: 0 5%; }

}

.page-id-153 #Header { min-height: 100px !important; }

.page-id-122 #Header { min-height: 10px !important; }

.page-id-119 #Header { min-height: 10px !important; }

.page-id-107 #Header { min-height: 210px !important; }

.page-id-117 #Header { min-height: 210px !important; }

.page-id-100 #Header { min-height: 210px !important; }

.page-id-85 #Header { min-height: 210px !important; }

.header-fixed #Top_bar { height: 90px !important; background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif"); }

.section-border-bottom { border-bottom: 1px solid rgba(0,0,0,.1); }

.dark-text-shadow { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); }

.header-fixed #Top_bar, #Top_bar.is-sticky { box-shadow: 0 0 0 0 !important; border-bottom: 1px solid rgba(255,255,255,.2); }

#Top_bar.is-sticky .logo { min-height: 91px; }

#Top_bar #logo { z-index: 100; left: 0; top; 0; overflow: visible; }

#Top_bar .logo #logo img {

padding: 0px 0px;

}

#Top_bar .logo #logo img {

margin-top: -6px;

margin-right: 10px;

margin-bottom: 0px;

margin-left: 0px;

}

#Top_bar .logo #logo img {

max-height: 91px;

}

aapcdirectltd · February 2016

also now that it works fine on Mobile, the menu background is gone! if you can check it yourself on your computer & mobile version you would see what i mean...

would appreciate if you can assist me with this CSS problem on mobile version (no background) & pc version (not aligned with the menu bar)

thanks a lot

Albert · February 2016

1. You have too many menu items in header and that's why they do not align with logo. What you need to do is to decrease padding between menu items with the following css:

@media only screen and (min-width: 1240px) {
    #Top_bar .menu > li > a span:not(.description) { padding: 0 15px !important; }
    #Top_bar .menu_wrapper { margin-top: 15px !important; }
}

2. To display header background on mobile, instead of:

.header-fixed #Top_bar { height: 90px !important; background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif"); }

you should use it with !important declaration:

.header-fixed #Top_bar { height: 90px !important; background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif") !important; }

Menu not available on iphone

Comments