Unable to adjust custom link menu font size

I have designed a unique custom menu called SANDUSKY with the css classes of no-hover. It is positioned alongside HOME, ABOUT, GALLERY, STORE, CONTACT which serve as the navigation menus. While attempting to customize SANDUSKY, I successfully altered the color and font style but encountered difficulty increasing its size; it remains consistent with the navigation menus.

Displayed below is the code I implemented:

.no-hover a:link {
  color: none !important;
  font-size: 50px;
}

.no-hover a:visited {
  color: none !important;
}

.no-hover a:hover {
  background-color: transparent !important;
}

.no-hover a:active {
  color: none !important;
}

.no-hover {
  position: absolute;
  left: -70px;
  font-family: lucida handwriting;
  font-weight: bold;
  font-style: italic;
}
<li id="menu-item-815" class="no-hover menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-815"><a href="link">SANDUSKY</a></li>

Answer №1

font-size: 14px; & font-size: 16px; I adjusted the font sizes in the following code snippet

.no-hover a:link {
  color: blue !important;
  font-size: 150px;
}
.no-hover a:visited{
  color: none !important; 
}
.no-hover a:hover {
  background-color: transparent !important;  
}
.no-hover a:active{
  color:  none !important;
  font-size: 130px;
}
.no-hover {
  position: absolute; 
  left: -100px;
  font-family: lucida handwriting;
  font-weight: bold;
  font-style: italic;
  font-size: 50px!important;
}
<li id="menu-item-815" class="no-hover menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-815"><a href="#">SANDUSKY</a></li>

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

Combining CSS documents

In order to improve page load speed, I need to consolidate multiple CSS files into one large file. Will the styles function properly if I merge them all together, or are there potential issues when combining multiple CSS files? My software is built in Ja ...

Extracting Tailwind color palette through API request

After conducting some research, I have not been able to find a definitive answer to my query. I possess a CMS API that supplies branding colors and other assets for a React application that can dynamically change its appearance using a combination of colo ...

The background remains hidden from view as a result of its positioning

There seems to be an issue with the background color of my list not displaying correctly. The problem arose after floating elements left and right. Any suggestions on how to resolve this? If you'd like to take a look, here's the link to the fidd ...

Design HTML dropdown menu

I have a sleek menu design with rounded buttons, and I am looking to extend the same style to the dropdown list. I have experimented with various approaches but there are two specific issues that I need assistance with: 1. Achieving rounded corners simil ...

Ensure the background image is optimized for viewing on screens of any size

I am facing an issue with an image on my website that serves as the background for some elements. The image is wider than it is tall, causing problems for users viewing the site on phones. Is there a way to cut off the sides of the image and ensure it fits ...

What is the best way to extract a single image from JSON data using AngularJS?

Using ng-repeat in HTML, how can I display only a single image instead of all images? <img class="size" ng-src="{{image.image}}" /> In CSS, I aim to define the size of the image. .size { margin-left:0.3em; width:11em; height:11em; border:0.4em sol ...

Why does it seem like only one div is being added?

I am facing an issue with dynamically appending multiple div elements. Despite my efforts, only one div element is showing up on the browser when I try to test the code. I have searched for similar problems but could not find any solutions. Any assistanc ...

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

Currently, I am utilizing the Tag-it jQuery plugin found at Tag-it, which functions within a ul element. Within my horizontal list (a ul with multiple li elements), I aim to add another li element containing the Tag-it ul list alongside the main horizonta ...

Center the text vertically within a card using Vuetify styling

I am seeking a way to vertically align text within a card using Vuetify or traditional CSS in a Vue project. Here is my code: <template> <div> <v-container class="my-5"> <v-row justify="space-between"> <v- ...

Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

I have been struggling with aligning radio buttons to match the alignment of the form's text boxes. I've experimented with various solutions recommended on this site, as well as others and YouTube. However, the most helpful resource I found was: ...

Tips for overriding bootstrap.css file in mvc asp.net using Visual Studio

I am currently working on creating a website using Mvc asp.net in Visual Studio 2013. I have integrated my css file, 'style.css', into the project, but I am encountering unwanted white spaces and margins around headers and other key elements, eve ...

Count the amount of exposed items in each row within a specific container size and dimensions

I created a code sample available at demo code to showcase li elements within a ul displayed in a flow-like manner with the use of display:inline. The challenge I am facing is determining the number of complete li items that are not wrapping for each row ...

What is the best way to resize an HTML element to fill the remaining height?

I'm struggling with adjusting the height of a node-webkit app to fit the current window size. See below for an image depicting what I am aiming for. Intended Goal : HTML Markup : <body> <div class="header"> THIS IS A HEADER W ...

New Feature in Bootstrap4: Navigation Bar Alignment Shift to the Left

I need help aligning my links to the right side of the page I attempted to use mr-auto but it was not effective <body> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mr-auto mt-2 mt-lg-0"> <a class="navbar-brand" hre ...

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

Clicking on the overlay does not close the bootstrap collapsed toggle

I'm currently facing an issue where I need to add a listener that closes the menu when clicked away. The code snippet below shows my attempt at solving this problem: $("body").click(function(e){ var $box1 = $('.navbar-toggle'); var $b ...

Having trouble styling my Aside element correctly

I'm having trouble aligning my aside element on the page. It's not lining up properly with the rest of the content and is overlapping into the header area. How can I resolve this issue? Here's a snapshot of what it currently looks like: ht ...

Managing the layout with React Native Flexbox to evenly distribute items

Check out this React Native Demo I put together featuring Santa images being added and removed in a Flexbox. Bunch of Santas I noticed that when there are more than 3 Santas, the layout shifts to the left. I'm curious about how to keep the Santas ce ...

What is the best way to position a table caption at the top of a table?

I need help setting up a calendar within a table structure, and I'm struggling to add a caption at the top of the table. Unfortunately, I can't modify the current table structure. I want it to resemble the example shown below: https://i.sstatic. ...

Issue with Bootstrap 5 dropdown menu on mobile devices when not sliding down upon clicking

Important things to know before getting started: Utilizing Django (python) Implementing Bootstrap Additionally, using html and css Steps taken (in sequence leading up to encountering an error): Copied the navbar template from the bootstrap navbar docume ...