SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Find the correct line and how to apply the change

3 years 3 months ago #123449 by afsfire
I have a site "excelbusinessfunding.com" that I have been trying to find the correct line in the correct stylesheet to increase the size of the "Apply Now" portion of the top floating menu. it would be the "menu-item-2283" in the code below. I mean it seems easy enough but for whatever reason when I try to make the changes to that particular portion of the menu it just doesn't work. First of all I'm not even sure I'm applying it correctly.

I have tried adding things like this

.menu-item-2283{
font-size: -webkit-xxx-large;
}
or
#menu-item-2283{
font-size: -webkit-xxx-large;
}
I have even tried them with the !important; but still no change. I have gotten it to work with the entire menu but just want this particular menu item to be larger than the others. Any ideas pointing me in the right direction would be super helpful and appreciated.

<div class="span8" data-motopress-type="static" data-motopress-static-file="static/static-nav.php">
			<!-- BEGIN MAIN NAVIGATION -->
<nav class="nav nav__primary clearfix">
<ul id="topnav" class="sf-menu sf-js-enabled"><li id="menu-item-2046" class="menu-item menu-item-type-custom menu-item-object-custom"><a>Call Now: (888) 510-7539</a></li>
<li id="menu-item-2283" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://excelbusinessfunding.com/business-loans-lines-of-credit-app-3/">Apply Now!</a></li>
<li id="menu-item-2750" class="menu-item menu-item-type-custom menu-item-object-custom"><a>Fax: (888) 519-9383</a></li>
</ul><select class="select-menu"><option value="#">Navigate to...</option><option value="">Call Now: (888) 510-7539</option><option value="https://excelbusinessfunding.com/business-loans-lines-of-credit-app-3/">Apply Now!</option><option value="">Fax: (888) 519-9383</option></select></nav><!-- END MAIN NAVIGATION -->		</div>

Please Log in to join the conversation.

3 years 3 months ago - 3 years 3 months ago #123498 by Valentin
Hi afsfire,

Try a more specific selector:
.header .nav__primary .sf-menu > li.menu-item-2283 > a {
   font-size: something;
}

The more specific the CSS selector, the higher priority it has.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 3 months ago #123505 by afsfire
Hmm, yeah seems it is still ignoring it. after trying your suggestion.

I found that if i go to inspect it in Chrome and I change the a href from
<a href=" excelbusinessfunding.com/business-loans-lines-of-credit-app-3/ ">Apply Now!</a>
to this
<a href=" excelbusinessfunding.com/business-loans-lines-of-credit-app-3/ " style="font-size: -webkit-xxx-large;">Apply Now!</a>

it performs the desired effect but I'm not sure how/where to apply that... it's probably incorrect to do it that way, but so far its the only way I have received the desired result so far.

Please Log in to join the conversation.

3 years 3 months ago #123507 by afsfire
i was thinking it was being a problem because the selector was coming from an array but not sure. Still going through the CSS Courses here and still very green on it.

Please Log in to join the conversation.

3 years 3 months ago #123509 by Valentin
You can force the CSS by adding !important:
.header .nav__primary .sf-menu > li.menu-item-2283 > a {
   font-size: something !important;
}

Replace something with the font-size value, such as 20px.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 3 months ago #123513 by afsfire
I added
.header .nav__primary .sf-menu > li.menu-item-2283 > a {
font-size: 20px !important;
}

and no change i scaled it to 50px and nothing... smething must be blocking that somewhere I guess.

Please Log in to join the conversation.

3 years 3 months ago #123516 by afsfire
I see the piece that is overriding it is
.sfmenu > li > a The location its saying is index:120 (see screenshot)

I'm not quite sure where in my folder structure I should be looking for "index"
I looked at all of my index.php files and nothing in them.. do you know that this is referencing?

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 3 months ago - 3 years 3 months ago #123517 by Valentin
How are you trying to load the custom CSS? I don't see it loaded in my end

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

3 years 3 months ago #123520 by afsfire
I'm actually adding in Wordpress under the Appearance > Cherry Options > Custom CSS,

When that didn't work i started looking through files on the server.

This message has an attachment image.
Please log in or register to see it.

Please Log in to join the conversation.

3 years 3 months ago #123521 by Valentin
It seems other custom CSS is broken the rest of the code.
See the extra semicolon in color property:
.title-section h1 {
margin: -7px 0 -14px !important;
color: #3498db; !important;
}

Change to:
.title-section h1 {
margin: -7px 0 -14px !important;
color: #3498db !important;
}

Hopefully, that would make the rest of the CSS works, including the font-size for the "Apply now!" menu item.

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!