Changing the font-family on the dropdown menu provided by Codrops seems to be difficult

Looking for help with the Tympanus Codrops Dropdown Menu - SimpleDropDownEffects.

I'm having trouble changing the font-family on my website. I am using Icomoon for the icons, and while that works fine, I can't seem to properly format the text how I want it.

Oddly enough, I can adjust the font-size, font-style, weight, and color of my .cd-dropdown ul li span, but not the font family (such as Arial or Trebuchet), which remains stuck in Times New Roman. I have double-checked that the correct font is included, but I can't figure out where the issue lies.

Any suggestions would be greatly appreciated. Thank you!

jqueryhtmlcssiconstext-formatting

Answer №1

body {
background: #f4f4f4 url("../images/grid_DominikKiss_SubtlePatterns.jpg") repeat scroll 0 0;
color: #333;
font-family: "Lato",Calibri,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
overflow-x: hidden;
overflow-y: scroll;

}

Try adjusting the font declaration in the body tag to see if it makes a difference.

Answer №2

Remove the font size property from the body and define any styles you want for .cd-dropdown ul li

For instance(Your Example):

.cd-dropdown ul li {

     font-size: 4vw;
        z-index: 1002;
        top: 130px;
        left: 0px;
        margin-left: 0px;
        opacity: 1;
        transform: none;
        transition: all 300ms ease;
        width: 300px;

}

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

html safeguarding user accounts

function Authenticate() { loggedIn = false; username = ""; password = ""; username = prompt("Please enter your username:", ""); username = username.toLowerCase(); password = prompt("Please enter your password:", ""); password = ...

javascripthtml

Maximize the YouTube video for full screen viewing

Take a look at the code snippet from our page here: <div className={styles.videoPreview}> <iframe src={`${videoData[router.locale]}?autoplay=0`} title="Flytime" ...

javascripthtmlreactjsnext.jsyoutube

Sending an Ajax request using the POST method with a list as the

Is there a way to perform an Ajax Post using a dropdown list? For instance, if I select the first item from the dropdown, can I send the id value of the li>a to a php page (data.php)? Any suggestions on how to achieve this? Check out the demo here ...

jqueryajax

Unexpected unhandled_exception_processor in Google Chrome

I keep encountering a strange uncaught exception handler in Google Chrome. After updating all follow buttons to download JavaScript asynchronously, I noticed an error in the content.js file mentioned in the exception message which advises against polluting ...

javascriptjquerygoogle-chrome

The function nivoSlider cannot be found in the selected element

I'm having trouble integrating Nivoslider into my website, it's not working for me. Can someone please help me with this issue? Interestingly, it's working fine on my local machine but not on my server. I have tried other suggested solutions ...

html

Issue with Hover Effect on Safari Browser

Encountering a peculiar issue exclusively in Safari - when hovering over a link in the header, the links to the right of the hovered-over link alter their size (appearing smaller) during the hover animation. Once the animation concludes, these links revert ...

javascriptjqueryhtmlcsshover

Is it possible to utilize the setInterval function twice within one .hover() event?

Is it possible to use setInterval twice in .hover()? If so, how can it be achieved? This is what I have in .hover: var target = evt.target; if (target.timer) { clearTimeout(target.timer); target.timer = null; } targe ...

jqueryhoversetinterval

Creating a customizable navigation bar using only CSS

I'm currently working on creating a navigation bar using only HTML and CSS, without the need for JavaScript to open and close it. However, I've encountered an issue where the navigation bar remains open even after setting display: none or visibi ...

css

When converting HTML to PDF using Dompdf, Font Awesome icons may not appear as expected

I am currently using Dompdf for exporting an HTML page to PDF. The issue I am facing is that when the HTML file contains Font Awesome icons, in the resulting PDF there are question marks instead of the icons. Below is a snippet of the HTML code: <!DOC ...

csspdffont-awesomedompdf

Splitting data within a loop in PHP and transmitting it to AJAX HTML with unique identifiers

In my database table, I have a list of over 100 doctors. Below is the PHP code for retrieving these doctor records from the database in a file named dc.php: $conn= mysqli_connect('localhost', 'root', '', 'test'); $q ...

phpjqueryajaxperformance

Arrange and overlay PNG images within a Bootstrap container using position:absolute

I've been attempting to align and stack some images within a bootstrap grid, but I'm having some trouble. Instead of aligning within the grid, the images seem to align to the window instead. I've been using position:absolute, which I found ...

csstwitter-bootstrapcss-position

Are there any recognized symbols or logos specifically for selecting language options on Android devices?

We are in need of a feature that allows users to easily change the language within the app to suit their preferences. The process involves clicking on an image button which will then display a pop-up menu with various language options for selection. Is th ...

androidiconsstandards

To display the newly received ajax content on the page, I must ensure that the DOM can properly render the new divs

Currently, I have a page that undergoes a lot of ajax operations. The ajax function loads a table of products which contains buttons for updating and deleting items. However, these buttons don't respond unless I include $(document).ready inside the su ...

jqueryajax

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...

javascriptjqueryhtmlcss

PHP - Trouble with onClick event triggering "echo" to output Video and Image SRC using PHP tags

I am facing an issue with calling the data that I need to retrieve on a video src and image src. When I try to display them, they are not showing up. Can someone please provide me with the correct syntax? Thank you. I have a couple of questions, do I need ...

phphtml

Discovering a specific grandparent using its ID and retrieving the values of its children based on a specific class can be achieved effortlessly with the power

I have a dynamic div <div class="illustartionWrap" id="illustartionWrapId"> <div class="illusList illusListTop" id="illusList_heading"> <span class="fileName">File Name</span> <span class="fileDesc" ...

javascriptjqueryhtmlparentchildren

"Unveiling the invisible: Revealing hidden characters in PHP

Currently I am dealing with some code extracted from a MySQL column. Within this code are hidden characters like "\t" and "\n". I am attempting to showcase the raw code in a DIV while also making sure these hidden characters are visible. The cod ...

phphtmlcharacter-encoding

I am looking to organize my content by creating categories such as How, When, and Why for different videos. How can I achieve this for a large amount of text

I am in the process of organizing categories for the text I have. My goal is to display text from specific categories based on the color that a random video lands on. For example, if the video lands on the color red, I want text from the category labeled " ...

javascripthtmlcssarrays

Dynamic data retrieval with the power of JavaScript and AJAX

When attempting to send data using AJAX in PHP, I encountered an issue with my jQuery click function on a button that sends data only when the quantity is greater than 1. The error arises because PHP does not recognize the variables 'name' and &a ...

javascriptphpjqueryajax

Can JQuery be used to identify the CSS styles applied to selected elements?

Highlight the text by selecting it and clicking a button. If the text is already highlighted, clicking the button should make the selected text return to normal. Can this be achieved using jQuery and a single button? Is it possible to identify the CSS st ...

javascripthtmljquerycss