WordPress.org

Support

Support » Themes and Templates » Nav Bar Text

Nav Bar Text

  • 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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    esmi

    @esmi

    Forum Moderator

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

    WPyogi

    @wpyogi

    Forum Moderator

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

    WPyogi

    @wpyogi

    Forum Moderator

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Nav Bar Text’ is closed to new replies.
Skip to toolbar