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
}

‍♀️

score 0 · Answer 1 · answered Nov 11 '22 at 18:33

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 }.

Hi Chris, Apologies! (Months later) I've had hell of a lot happen; New Business Startup, New Job as a marketing manager + Seriously ill relatives. So I'm looking at this issue again, not only my site, but Weebly has made this an issue for ALL the weebly sites I've produced years ago! I quickly learned the !important was a 'oversite' on my part, having edited it and even if I try your CSS code, it doesn't work!‍♀️ I suspect Weebly is overriding this code somehow or for some reason. PS. I'm willing to pay for a fix, but I suspect it's Weebly overiding. — SmallBusinessHelper aka-Steve, Mar 09 '23 at 22:33

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

1 Answers1