How can I FIX/CHANGE the almost invisible Menu Items in my Website's Mobile Version? (Used to be fine then Weebly made changes)

Question

BACKGROUND Years ago, I built my first Weebly website for my business ( www.smehelper.com ) The mobile version 'used to' look great!

SINCE THEN However... Weebly made some changes a year or so ago ( I don't know what ), since then, regardless of what CSS I've tried in an attempt to overide things, I can't seem to make it change.

NOOB APOLOGIES Apologies if I'm using wrong terminology, I work in Marketing for a living and specialise in Lead Generation, however, I love to learn various items. www.smehelper.com

SOURCE CODE The following is ALL the CSS. Apologies for being a noob - Let me know if there's any other code/files you need 👍

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input{margin:0; padding:0}
ul{list-style:none}
fieldset{border:0}
img{
/*box-shadow: 2px 2px 7px #AAAAAA;*/
/*-webkit-box-shadow: 4px 2px 7px #AAAAAA;*/
/*16px=1em*/
}

html{width:100%}
body{
    width:100%;
    margin:0;
    padding:0;
    background-color:#eeeded;
    font-family:Trebuchet MS,sans-serif;
    /*font-size:14px;*/
    color:#eeeded;
    /*background: url(bodybg1400x790_planks.jpg);*/
    background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top no-repeat fixed; /* top center no-repeat fixed */
    background-size: 100% auto;
}
/* #bg{ */
/*  background:url("Swansea-Marketing-Consultant-Workshops-1280x1024.jpg") top center no-repeat fixed;*/
/* } */
blockquote{
    margin: 5px 0;
    padding-left: 10px;
    border-left: 7px solid orange !important;
    font: normal 1.3em;
    /*font-size:1.2em;
    font-style: normal !important;
    font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;*/
    line-height: 160%;
}
blockquote em {
    /*font: #ffcc00  !important;*/ /*orange*/
    /*font-style: bold !important;
    font-size: 1.4em !important;*/ 
    font: bold 1.4em #ffcc00 !important;
}
/*.thought via https://codepen.io/quadbaup/pen/rKOKQv (also in GglDrv_growth-dev_*/
a img{border:0}
a{text-decoration: underline; color:#4db7c8;} 
.clear{clear:both}
p{line-height:130%; color:#eeeded; font-size:14px; padding-bottom:10px}
em, ul em {
color:#ffcc00;/*yellow*/
}
h1{font-size:24px; font-weight:bold; color:#4db7c8; margin:0px 0px 10px 0px}
h2{
font-family:arial,sans-serif;
font-size:18px;
line-height:130%;
font-weight:normal;
letter-spacing:2px;
color:#ffc000; /*orig-turqiouse: #4db7c8*/ /*cccccc=Orig grey SW chose OR ffbc66=orange equiv of h2:first-line OR ffc000=warm-bright-yellow */
margin:18px 0px 2px 0px; /*12px 0px 12px 0px*/
/*background-color:yellow;*/
}
h2:bold {
    font-size:11px;
    color:#4B4B4B;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing:-3px;
    padding: 8px 0px 0px 0px;
}
/*
h2 a:link {
    color:white;
    text-decoration:none;
    /*line-height:150%;*/
/*}*/
/*h2 a:visited {*/
    /*color:white;*/
/*}*/
h2 a:hover {
    color:white;
    text-decoration:underline;
}
h2 a:active {
    text-decoration:underline;
    /*background-color:yellow;*/
}
h2:first-line {
    text-transform:uppercase;
    font-size:1.5em; /*SW's orig 18px pre feb'14 - 16px=1em - pre march 15: 1.3em*/
    /*font-variant: small-caps; /*pre mar'15=normal*/
    line-height:150%; /*pre mar'15=130%*/
    color:#66ccff;/*lime: #9dc205*/
    letter-spacing:normal;
}

#header{
    position:fixed;
    top:0px; left:0px;
    width:980px;
    height:auto;
    margin:0pt;
    padding:0pt;
    border:1px solid green;
    background:pink;
    }

#line {position:fixed; width:100%; height:125px; margin-top:60px; background:transparent url(navbg.png) repeat-x; z-index:2; border:1px solid green;}

#wrapper { /* this is the header to footer but not whole site background */
    position:relative;
    z-index:2;
    width:980px;
    height:100%/*150px*/;
    margin:0pt auto;
}

.logo {
    z-index:1000;
    position:fixed;
    top:0px; /*left:0px;*/
    margin:0px auto;
    width:980px; height:125px;/*width:980px; height:165px;*/ /*Area independent of Nav.*/
    background:url("small-business-helper-digital-marketing-for-UK-small-businesses-80pc-30pc.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background:url("small-business-helper-holistic-e-business-consultancy.png") no-repeat left center; /*fyi.logo is 980x118*/
/*background-color:black; opacity:0.50; -moz-opacity:92; filter:alpha(opacity=95);*/ /*use shaded header png instead*/
}
.logo a{
/*display:block;*/
    width:100%; height:100%;/*set clickable area*/
    text-indent:-9999px;
    overflow:hidden;
}
#telephone { /*for right hand side div element*/
    float: right;
    width: 500px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: white;
    font-size: 14px;
    text-align: right;
}
#telephone .number { /*for addressing class:number within right hand side div telephone element*/
    font-size: 34px;
}
#telephone #email a {
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    font-size: 15px;
    line-height: 24px; 
}

.navContainer{ /*FULL WIDTH BAR*/
    z-index:5;
    position:fixed; top:125px; left:0;
    height:35px /*50px*/; width:100%; /*aligns whole nav elements*/
    /*margin:2px auto;*/
    background:url("shadow1.png");
}

.frame{/*frame for nav area*/
    /*width:980px; height:55px;*/
    width:980px; height:35px; /*width:980px; height:173px;*/
    margin:0px auto/*4px auto 0px auto*/;
    /*border:1px solid purple;*/
}
.wsite-mobile-menu {
    background: url(theme/shadow1.png?1645107290);!important
}

.wsite-mobile-menu .wsite-menu-mobile-arrow {
    color: red; !important
    <!-- border: none; -->
    <!-- width: 16px; -->
    <!-- height: 16px; -->
    <!-- top: 5px; -->
    <!-- left: 0; -->
    <!-- background: url(theme/shadow1.png?1645107290) top left no-repeat; -->
    background: url(theme/shadow1.png?1645107290);!important
    <!-- background-size: 16px 16px; -->
}
.wsite-mobile-menu li a {
    <!-- font-weight: 300; -->
    color: red;!important
    <!-- padding: 15px; -->
    <!-- font-size: 16px; -->
    <!-- border-bottom: 1px solid #111 !important; -->
    <!-- text-shadow: 0 1px 0 rgb(0 0 0 / 70%); -->
    <!-- box-shadow: inset 0 0 1px rgb(255 255 255 / 20%), inset 0 1px 2px rgb(255 255 255 / 10%); -->
    background: url(theme/shadow1.png?1645107290);!important
}

.wsite-mobile-menu li a {
    <!-- font-size: 1em; -->
    <!-- line-height: 1.5; -->
    <!-- padding: 8px 10px; -->
    <!-- color: white; -->
    <!-- text-decoration: none; -->
    <!-- display: block; -->
    cursor: pointer;
    -webkit-tap-highlight-color: blue;!important
}

.wsite-mobile-menu a:hover, #active a{
    background-repeat:repeat-x;!important
    background-position:0 100%;!important
    color:blue/*txt hover color*/;!important
}



.mainNav{ /*actual nav textual area*/
    width:980px; /*changing this width wraps all main nav bullet elements*/
    font:14px Arial,sans-serif;
    color:#fff;
    /*margin:0px; */
    /*background:url("weebly-menu.png") no-repeat -9999px -9999px;*/
    margin:0px auto;
    /*border:1px solid red;*/
}
/*when changing all nav height change line-height also.*/
.mainNav a{
    display:inline-block;
    color:white;
    text-decoration:none;
    padding:0px 13px;
    width:auto;
    height:34px;
    line-height:34px/*42px*/; /*this aligns the nav text elements vertically*/
    margin:0px auto;
    background:transparent url("MainNavActive.png") no-repeat -9999px -9999px;
    /*border:1px solid red;*/
    /*background-color:black; opacity:0.92; -moz-opacity:92; filter:alpha(opacity=95);*/
}
.mainNav a:hover, #active a{
    background-repeat:repeat-x;
    background-position:0 100%;
    color:#00a1b4/*txt hover color*/;
}
.mainNav ul{
    margin:0 auto;
    list-style:none;
    background:url("bullet-weebly-menu.png") no-repeat -9999px -9999px;
}
.mainNav li{
    float:left;
}
.mainNav ul li.weebly-nav-more{
    background:none;
} /*unsure of usage*/
#weebly-menus .weebly-menu-wrap{
    position:absolute; top:25px; left:70%;
    width:250px; /*use to set + constrain width for drop downs*/
    margin:0px;
    /*background:black; opacity:0.85; -moz-opacity:92; filter:alpha(opacity=95);*/ /*initial excess blocks upon initial expansion*/
}
#weebly-menus span.weebly-menu-more{ /*controls the 'more arrows' i.e.>.  */
    height:100% /*39px*/;
    Margin:auto 0px;
    padding:auto 0px;
}
#weebly-menus .weebly-menu{
    margin:0;
    list-style:none;
}
#weebly-menus .weebly-menu li{
    float:none; /*controls float/alignment from one sub item to the next e.g.vertical v left=horizontal*/
    clear:none;
    width:100%; /*sets background width of drop downs*/ vertical-align:top;
}
#weebly-menus .weebly-menu li a{/*this is the actual drop down backgrounds in total*/
font:12px Arial,sans-serif; color:#fff; text-decoration:none;
display:block;
border:0 none;
background:black; /*background:url("bullet-weebly-menu.png") no-repeat 10px 100%*/
width:auto; /*sets text area*/
line-height:15px; height:auto; min-height:18px;
padding:14px 20px 10px 20px;
}
#weebly-menus .weebly-menu li a:hover, #weebly-menus .weebly-menu li.weebly-nav-current a{
background:#003366 /*#336699 #006666 #009999 #00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px */; /*blue hover background on sub-menu*/
/*background:#003366/*#336699/*#006666/*#009999/*#00a1b4*/ /*url("bullet-weebly-menu.png") no-repeat 30px ;*/ /*30px /*50%*/
}
#weebly-menus span.weebly-menu-title{display:inline; padding:0px;}

/* START MOBILE - MOBILE BURGER-MENU & BACKGROUND DROP-DROWN */
/* DESIGN GOAL: DOWN(dark). Standard: White Font. Hover: Blu Background highlight. Slect: Blue Font.*/
/* END MOBILE */

#container{position:relative; z-index:1; width:980px;}

.sliderContainer{width:980px;  min-height:200px;  height:auto;  max-height:400px;  overflow:hidden;  padding:0px 0px 0px 0px;  /*margin-bottom:17px;*/  /*background: url("sliderShadow.png") no-repeat 50% 100%*/}
.sliderContainer-noheader{padding-top:100px;}
.sliderContainer-short{padding-top:125px; width:980px;  min-height:200px;  height:auto;  max-height:400px;  overflow:hidden;}
#slider-tall{ position:center;  width: 980px;height: 400px; overflow: hidden}
.wsite-header{ width:980px; height:200px; background:url(%%HEADERIMG%%) no-repeat; margin:0px 0px 0px 0px }
#slider-short{ position:center;  width: 980px;height: 200px; overflow: hidden}
#slider-medium{ position:center;  width: 980px;height: 250px; overflow: hidden}
#slider-home{ position:center;  width: 980px;height: 250px; overflow: hidden}

#bar{position:relative; width:980px; height:45px;/*height:50px;*/ margin:4px 0px 2px 0px; background:transparent url(headerbg.png) repeat-x; /*margin-top:25px*/}
#bar-short{position:relative; width:980px; height:45px;/*height:50px;*/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}#bar-short{position:relative; width:980px; height:50px;/**/ background:transparent url(headerbg.png) repeat-x; border:1px solid green;}

#sitename{float:left; /*width:810px;*/ padding:10px;/*padding:13px 0px 0px 15px;*/ color:#eeeded; font-family:Georgia; font-style:italic; font-weight:bold; text-align:left; font-size:19px; letter-spacing:0.1em; /*background-color:red; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
.clearfix:after{content:"."; clear:both; display:block; height:0; visibility:hidden}
* html .clearfix{/*height:1%*/}
.framer{/*float:right;*/}

#viewcart{float:right; padding:14px 10px 0px 10px; /*background-color:yellow; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50);*/}
#social{float:right; padding:8px; /*background-color:blue; opacity:0.50; -moz-opacity:50; filter:alpha(opacity=50); margin:-21 10 0 0;*/}

#social li{float:right; /*floats individual elements alongside each other*/list-style-type:none}
#social li a{display:block; margin:0 3px;  padding:0; height:30px; width:30px; text-indent:-9999px}
#social li a#rssf{background:url(rss.png) no-repeat top left}
#social li a#rssf:hover{background-position:bottom left}
#social li a#fb{background:url(facebook.png) no-repeat top left}
#social li a#fb:hover{background-position:bottom left}
#social li a#mail{background:url(mail.png) no-repeat top left}
#social li a#mail:hover{background-position:bottom left}
#social li a#twitter{background:url(twitter.png) no-repeat top left}
#social li a#twitter:hover{background-position:bottom left}
#social li a#linkedin{background:url(linkedin.png) no-repeat top left}
#social li a#linkedin:hover{background-position:bottom left}

#content_container{position:relative; z-index:1; width:980px; margin:0px auto;}
#contentbg{position:relative; width:980px; height:auto !important; min-height:300px; background:transparent url(contentbg-98pc-prplGrad.png) repeat-y}
#content{position:relative;  width:940px;  height:auto !important;  min-height:300px;  padding:20px 20px 20px 20px}

#footerbg {position:relative; width: 980px; height:60px; background:transparent url(footerbg.png) repeat; margin:4px 0px 20px 0px; padding:10px 0px;}
#footer {position:relative; width:940px; /*height:80px;*/ /*text-align:right;*/ background: url(footerbg.png) repeat; margin:4px 0px 30px 0px; padding:15px 20px 0px 20px;/*border:green 1px solid;*/}
#footer li{}
#footer a{color:#a2a1a0; text-decoration:underline;}
#footer a:hover{color:orange;}
#footer .weebly-footer a{color:#e6e6e6; border:green 1px solid;}

/**************plugin for index.html Layout start HERE*******************************************/

.flash_slider{
  width:980px;
  height:300px;
  overflow:hidden;
/*  margin:250px 0px 0px 0px;*/
/*  orig margin-left:-7px;*/
/*background:green;*/
}
/***************Splash Page and Landing page CSS Starts Here *************************************/

/***************   START Stick Contact Tab ******************************/
/* http://mojotech.github.io/stickymojo/ */
#sticky-contact-tab {
  width: 120px;
  background-color: #ccc;
  min-height: 200px;
  margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
  padding: 15px 10px;
  float: left; /* float right for a right aligned sidebar */
}
/***************   END Stick Contact Tab ******************************/

WHAT I TRIED I tried overiding various css elements using !important

I'm guessing, either: a) I've incorrect css-selection or b) I need to add HTML scripts or c) It's not doable via Weebly's Manual CSS

EXAMPLE:-

.wsite-mobile-menu a:hover, #active a{
    background-repeat:repeat-x;!important
    background-position:0 100%;!important
    color:blue/*txt hover color*/;!important
}

🤷‍♀️

Answer 1

This appears to be an issue specific to Weebly, whereby they HIDE the directory information at the top, in the mobile version, which is read as 'hidden' text, at the top of the page (on some versions first page only). As Google selects based on the mobile version, this appears to 'mark down' Weebly sites, in Google rankings, for having 'hidden text'. Weebly (now part of Square) has continued these errors, which is why few are now recommending their WYSIWYG websites. A failure to address the issue creates problems for those they market the websites to.

Answer 2

Your example is using !important incorrectly. In CSS, the !important must come before the semi-colon, e.g. background-repeat: repeat-x !important;. This appears to be why your styles are not applying.

If you replace your code with the following, you should see the difference:

.wsite-mobile-menu a:hover, #active a{
    background-repeat:repeat-x!important;
    background-position:0 100%!important;
    color:blue/*txt hover color*/!important;
}

As for actually making things more visible, it took a while to find what menu items you were referring to, but I believe you're talking about these:

In this example, I've just overridden color to make them stand out a bit more.

You should be able to get the same result with .wsite-mobile-menu a { color: #000 !important }.