Looking for a solution to adjust the barely visible menu items on my website's mobile version, after recent changes made by Weebly. How can I make them more noticeable and user-friendly?

A BIT OF HISTORY Some years back, I created my initial Weebly website for my business at www.smehelper.com. The mobile version used to look fantastic!

CHANGES OVER TIME However... about a year ago, Weebly made some alterations (I'm not sure what exactly), and ever since then, no matter what CSS tricks I've attempted to implement, I can't seem to get it to budge.

BEGINNER'S APOLOGIES Sorry if I'm not using the correct terminology; I work in Marketing and specialize in Lead Generation, but I always enjoy learning new things. Visit www.smehelper.com.

SOURCE CODE Below is ALL the CSS code. Apologies for being a newbie - Let me know if you require any additional code/files. 👍

 /*CSS code*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input{margin:0; padding:0}
/*more styles here*/

/**************/

MY EFFORTS SO FAR I attempted to override various css properties using !important declaration.

I suspect that either: a) I am targeting the wrong css selectors or b) I need to incorporate HTML scripts or c) It might not be achievable through Weebly's Manual CSS customization

EXAMPLE:-

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

🤷‍♀️

csscss-selectorsmenuitemhamburger-menuweebly

Answer №1

Your usage of !important in the example provided is incorrect. In CSS, !important should precede the semi-colon, like this: 

background-repeat: repeat-x !important;
. This could be the reason why your styles are not being applied correctly.

If you update your code to the following, you may notice a difference:

.nav-links a:hover, #active-link a{
    background-repeat:repeat-x!important;
    background-position:0 100%!important;
    color:red/*hover text color*/!important;
}

Regarding improving visibility, it took some time to identify the menu items you were referring to. I assume you mean these:

In this instance, I simply adjusted the color property to enhance their prominence.

You should achieve a similar outcome with 

.nav-links a { color: #000 !important }
.

Answer №2

It seems that Weebly has a specific issue where they conceal directory information at the top of mobile versions, which Google interprets as hidden text and may negatively impact rankings. Despite being part of Square now, Weebly has persistently failed to rectify this error, leading many to no longer recommend their WYSIWYG websites. Failure to address this issue poses challenges for those who rely on Weebly's marketing for their websites.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disable the "top" property for the Material UI Drawer component

I'm currently working on implementing a Persist Left Drawer from Material UI that slides in from the left side. However, I don't want the drawer to cover the entire left side of the page. Essentially, I want to remove the "top" style property men ...

cssreactjsmaterial-ui

Tips on Creating a Responsive Absolutely Positioned Div for Various Screen Sizes

I'm currently working on a website and I've come across an issue regarding the responsiveness of an absolutely positioned div across various screen sizes. Let me provide some context and share what I have attempted so far: Issue: Within the head ...

cssresponsive-designfrontendtailwind-cssejs

The responsive push menus refuse to open automatically and fail to function

Before we go any further, take a moment to explore the demo here: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/ I decided to work with the source code from the demo by creating new files for Javascript, CSS, and HTML. To simplify things, I ...

javascriptjqueryhtmlcssresponsive-design

The functionality of Bootstrap popover is not functioning properly

I'm trying to activate a popover when users hover their mouse over a div. Can I use a popover with a div, or am I missing something in my code? Here's what I have: <div class="grid-item content-text" data-toogle ="popover" data-content="Lorem ...

javascriptjquerycsstwitter-bootstrap

Ways to display an icon in Angular 10 only when it is hovered over

Just getting started with Angular and still learning the concepts. Trying to figure out how to show an icon only when it's hovered over. Can anyone assist me? Sorry, can't share the code because of company rules. The icons are for sorting and ...

htmlcssangularicons

Adjusting the 'Division' Style in HTML

Currently, I am utilizing the incredible StackEdit for my documents. One of its awesome features is the ability to export an HTML file of the document. This document utilizes The default CSS File. As an example, here is the code from the downloaded HT ...

htmlcssstackedit

The mysterious result of the <em> tag in a WordPress theme

My new WordPress theme is unexpectedly outputting an <em> tag, even though I haven't used any <em> tags in my theme. This is causing issues and affecting the design. Below is the content of my index.php file: <?php get_header(); ?> ...

phphtmlcsswordpress

Release a stationary element upon scrolling down the page

I have a calculator feature on my website which was coded in php. At the end of this calculator, there is a section that displays the results. While the results div works properly on desktop, I am looking to implement a fix for mobile devices. Specificall ...

javascriptjquerycsssticky

Enable landscape mode exclusively for tablet and mobile devices, excluding desktop users

Looking to rotate content on tablet and mobile devices without affecting desktop view. Attempted solutions: rotate(90deg) -> Didn't work as it rotated even on desktop @media screen and (orientation:lanscape) -> Also didn't work as it ...

jquerycss

The placement is set to absolute, with a designated height

Here is an example http://jsfiddle.net/HnfCU/ I am using jQuery to toggle the visibility of the .child div. The position of the .child is set to absolute relative to its parent element, .parent. The challenge I am facing is adjusting the height of the .ch ...

jqueryhtmlcssheightcss-position

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

javascripthtmlcssreactjsmaterial-ui

bourbon neat quadrilateral layout

Attempting to revamp someone else's messy, yet effective, CSS3 template into a more organized format. The transition to bourbon/neat has been smooth, but I'm facing a roadblock when it comes to creating a responsive image grid. <section class ...

csssassbourbonneat

selenium.common.exceptions.InvalidSelectorException: Alert: A selector that is invalid or illegal has been provided

Currently, I am facing an issue with writing a script to manage web pages containing multiple elements. Upon clicking on one of these elements, it should open a new window. However, my current script is struggling to identify the element correctly. I requi ...

pythoncssselenium

Leveraging Bootstrap grid system within AngularJS elements

I am currently working on wrapping grid element divs into Angular components in order to streamline the input process and establish a standard: <bootstrap-row> <bootstrap-input-text col=6 ng-model="$ctrl.model" label="hey!"& ...

javascripthtmlcssangularjsbootstrap-4

CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button. The class 'btn' is defined below; .btn { backg ...

css

Customize dropdown item colors in React using a color picker

I am currently utilizing a react color picker to create a personalized 16 color gradient. The process involves selecting a color from a dropdown menu and then using the color picker to make adjustments. This action updates an array that dictates the stylin ...

javascripthtmlcssreactjsreact-native

What is the best way to implement a conditional data-attribute tag in order to trigger JavaScript functionality?

Is there any way to conditionally apply JavaScript or jQuery code in an HTML Template? For example, if a data-id attribute with the value "no-copy" is found inside the body tag, certain JavaScript code will be applied. To explain it more simply, I have J ...

javascripthtmljquerycss

Unable to expand the Navbar toggler feature in Bootstrap 5

Despite searching for solutions to this issue in previous discussions, I have been unable to successfully implement them. Recently, I was experimenting with Bootstrap 5, specifically the collapsible navbar button feature. The idea is that when the viewpor ...

javascripthtmlcssbootstrap-5

Attempting to show information upon hovering using CSS and keyframes

After creating a display that matched my boss's request for a "flat tile" look using only CSS, he suddenly changed his mind and now wants the text to slide out while keeping the image in place. You can see my progress here. I initially tried floating ...

htmlcsscss-animationsz-index

What is the best way to make a message appear only when the browser screen is smaller?

I am struggling to make a message appear only when the screen is resized. It's puzzling me why my current approach isn't yielding the desired result. Instead of displaying the message only on a shrunk screen, it shows up all the time. I can confi ...

htmlcss