WordPress.org

Ready to get started?Download WordPress

Forums

Nav Bar Text (7 posts)

  1. cpilotw87
    Member
    Posted 1 year ago #

    I've done some research and am unable to locate the exact code in the .css file for my custom-made theme (thetealisreal.org)to allow the submenus of my navigation bar to stretch to the width of the text. Currently, the text is akwardly spaced and extended to 2+ lines, whereas I'd prefer the text to be on a single line.

    Thoughts? Suggestions?

    Thank you VERY much!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which function does your custom made theme use to generate the navigation?

  3. esmi
    Forum Moderator
    Posted 1 year ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  4. cpilotw87
    Member
    Posted 1 year ago #

    @ 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.]

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  6. cpilotw87
    Member
    Posted 1 year ago #

    How did you find that? I tried using Firebug but not sure how to seek the code for each part of the website..

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The Firebug site has tons of good information about using it...you need to look at the CSS using inspect element.

Topic Closed

This topic has been closed to new replies.

About this Topic