Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Which function does your custom made theme use to generate the navigation?
Try using Firefox with the Firebug add-on for this kind of CSS work.
http://getfirebug.com/
@ Andrew – not sure.
@ esmi – I use Google Chrome and after pointing at the submenu (any of them) and click “Inspect Element”, it seems that all are listed under:
<strong><div id="navbarleft"></strong>
<ul id="nav">
<li class="page_item page-item-2"><a href="http://www.thetealisreal.org/">Home</a>
<li class="page_item page-item-36"><a href="http://www.thetealisreal.org/about-us">About Us</a>
<ul class="children">
<li class="page_item page-item-226"><a href="http://www.thetealisreal.org/about-us/wh">Who is Pamela H. Watson?</a>
<li class="page_item page-item-179"><a href="http://www.thetealisreal.org/about-us/mission">Our Mission</a>
<li class="page_item page-item-186"><a href="http://www.thetealisreal.org/about-us/our-staff">Our Staff</a>
<li class="page_item page-item-40"><a href="http://www.thetealisreal.org/about-us/news">News Archived</a>
<li class="page_item page-item-169"><a href="http://www.thetealisreal.org/about-us/info">Information Center</a>
<li class="page_item page-item-242"><a href="http://www.thetealisreal.org/about-us/our-founders-message">Founder’s Message</a>
<li class="page_item page-item-27"><a href="http://www.thetealisreal.org/events">Events</a>
<li class="page_item page-item-218 current_page_item"><a href="http://www.thetealisreal.org/about-ovarian-cancer">About Ovarian Cancer</a>
<ul class="children">
<li class="page_item page-item-268"><a href="http://www.thetealisreal.org/about-ovarian-cancer/what-is-ovarian-cancer">What is Ovarian Cancer?</a>
<li class="page_item page-item-270"><a href="http://www.thetealisreal.org/about-ovarian-cancer/causes-symptoms">Causes & Symptoms</a>
<li class="page_item page-item-272"><a href="http://www.thetealisreal.org/about-ovarian-cancer/initial-diagnosis">Initial Diagnosis</a>
<li class="page_item page-item-274"><a href="http://www.thetealisreal.org/about-ovarian-cancer/treatment">Treatment Options</a>
<li class="page_item page-item-277"><a href="http://www.thetealisreal.org/about-ovarian-cancer/risk-prevention">Risk & Prevention</a>
<li class="page_item page-item-280"><a href="http://www.thetealisreal.org/about-ovarian-cancer/latest-research">Latest Research & Available Resources</a>
<li class="page_item page-item-283"><a href="http://www.thetealisreal.org/about-ovarian-cancer/available-support">Available Support</a>
<li class="page_item page-item-224"><a href="http://www.thetealisreal.org/join-our-fight">Join Our Fight!</a>
<ul class="children">
<li class="page_item page-item-288"><a href="http://www.thetealisreal.org/donate">Donate</a>
<li class="page_item page-item-257"><a href="http://www.thetealisreal.org/join-our-fight/corporate-sponso">Corporate Sponsorship</a>
<ul class="children">
<li class="page_item page-item-314"><a href="http://www.thetealisreal.org/join-our-fight/corporate-sponso/sponsorship-application">Sponsorship Application</a>
<li class="page_item page-item-38"><a href="http://www.thetealisreal.org/donate">Donate</a>
</div>
Does this help?
[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]
What you need to look at is the CSS code for those elements — not the HTML. The relevant CSS is this:
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: none repeat scroll 0 0 #7DD6DE;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #000000;
float: none;
font-family: 'CalibriRegular';
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 7px 10px;
text-transform: uppercase;
width: 150px;
}
Specifically, the width attribute.
How did you find that? I tried using Firebug but not sure how to seek the code for each part of the website..
The Firebug site has tons of good information about using it…you need to look at the CSS using inspect element.
