background color disappeared on nav bar - JoomlArt
Resume & Portfolio J! Template Download
version RC is available Free Download
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • msager Friend
    #183221

    I am a beginner here and tried to change the width of the nav bar. When I did that I lost the orange color block of my nav bar. Can someone tell me where I have to go and the code to get the orange color block back? Website is http://thetriangledog.com

    Thanks

    TomC Developer
    #476698

    I am not 100% sure what you did compared to what you had, but here is a suggestion for how to try to re-establish the background color for your main nav bar . . .

    Within file path –> /templates/ja_purity/css/ja-sosdmenu.css

    at line 66, you will see the following:

    #ja-mainnavwrap {
    background: none repeat scroll 0 0 #FFFFFF
    border-top: 1px solid #FFFFFF
    }

    As it stands now, the background color is set for/as WHITE (i.e. color hex code #FFFFFF)

    Find the color hex code for the “orange” color you want, and modify the above CSS rule accordingly,
    for example . . .

    #ja-mainnavwrap {
    background: none repeat scroll 0 0 #FF6666
    border-top: 1px solid #FFFFFF
    }

    ALTERNATIVELY . . .

    Within the same file path –> /templates/ja_purity/css/ja-sosdmenu.css
    at line 117, you will see the following:

    #ja-mainnav, #ja-mainnav ul {
    line-height: 20px;
    margin: 0;
    padding: 0;
    }

    ADD a background color property to this rule, for example . . .

    #ja-mainnav, #ja-mainnav ul {
    line-height: 20px;
    margin: 0;
    padding: 0;
    background: #FF6
    }

    Hope that helps

    msager Friend
    #476715

    Hey Tom,

    Thanks for the quick reply. Unfortunately it didn’t work. Originally I had gone into a module and changed a pixel width. The name of the module is Top Nav Custom. Here is the code. Can you tell me if this is the right code to change and if yes, then how can I get just the blocks to change to #cc6601? Thanks!

    <!– /********************************************* * NAVIGATION *********************************************/ body { text-align: center;} #trianglecontainer { width:100%; } #trianglemain { width:900px; margin:0 auto; } div.top_nav { background-color:#cc6601 text-align:center; } /* for IE */ div#top_nav li, div#top_nav li a, ul#footer_nav_links li, ul#footer_nav_links li a { Float: right; display: block; } div#top_nav ul { background: none; } div.top_nav, div.top_nav ul { height: 1%; } /************************************************ * Default nav color scheme ************************************************/ /* Colorized nav bars for various pages */ div.top_nav, ul#footer_nav_links, /* Defaults */ #home div.top_nav, #home ul#footer_nav_links { background-color: #cc6601 } div#top_nav li.current a, ul#footer_nav_links li.current a, /* Defaults */ #home div#top_nav li.current a, #homepage #n_home a, #homepage #nf_home a, ul#footer_nav_links li.current a, div#top_nav a:hover, ul#footer_nav_links a:hover { background-color: #666634 } #homepage #n_home a { font-size: 12px; } #homepage div#top_nav li#n_home a:hover { background-color: #cc6601 !important; } #homepage div#top_nav ul.second_topnav { background-color:#cc6601 } ul#footer_nav_links { height:28px; margin-bottom: 16px; } div#top_nav:after, div#top_nav ul:after, ul#footer_nav_links:after { content: “.”; clear: both; display: block; visibility: hidden; height: 0; } div#top_nav ul { border-bottom:1px solid #c0c0c0 } div#top_nav li span#nav_line { color: #fff float:left; margin-top:2px; } div#top_nav li { color: #FFFFFF float:left; } div.add_white_line li { border-right:1px solid #c0c0c0 } ::root div#top_nav li a { /* safari only */ position: relative; } div#top_nav li a { height:17px; padding: 5px 8px 5px; float: left; display: block; color: #fff font-weight:bold; font-size: 10px; letter-spacing: .075em; text-transform: uppercase; } ul#footer_nav_links li a { padding: 6px 10px; float: left; display: block; color: #fff font-weight: bold; font-size: 10px; letter-spacing: .075em; text-transform: uppercase; } div#top_nav li a:hover, ul#footer_nav_links li a:hover { text-decoration: none; } ul#footer_nav_links li#footer_fbconnect, li#nf_fundrace, li#nf_archive { display:none; } ul#footer_nav_links li#footer_fbconnect a:hover { background-color:transparent; } ul#footer_nav_links li a#a_fbconnect_footer { padding: 1px 3px 1px 0pt; text-decoration: none; } ul#footer_nav_links li#footer_fbconnect { float:right !important; height:27px; } li.top_nav_right { float:right !important; } li.top_nav_right a { text-transform:none !important; } li.top_nav_right, li.last_topnav_el { border-right:none !important; } –>
    <div id=”trianglecontainer”>
    <div id=”trianglemain”>
    <div id=”top_nav”>
    <div class=”add_white_line top_nav”>
    <ul class=”first_topnav”>
    <li id=”n_home”><a href=”home/” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> HOME </a></li>
    <li id=”n_home”><a href=”articles/articles” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> ARTICLES </a></li>
    <li id=”n_home”><a href=”web-only/emergency” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> EMERGENCY </a></li>
    <li id=”n_living”><a href=”web-only/shelters-the-triangle-dog” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> SHELTERS </a></li>
    <li id=”n_style”><a href=”dog-shelters-and-rescues-north-carolina” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> RESCUES </a></li>
    <li id=”n_books”><a href=”recreation” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> RECREATION </a></li>
    <li id=”n_home”><a href=”admin/the-triangle-dog-media-kit” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> MEDIA KIT </a></li>
    <li id=”n_home”><a href=”web-only/about-us-the-triangle-dog” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> ABOUT US </a></li>
    <li id=”n_denver”><a href=”admin/contact-the-triangle-dog” onclick=”urchinTracker(‘/t/a/topnav.v3’);”> CONTACT US </a></li>
    </ul>
    </div>
    <div class=”add_white_line top_nav”>
    <ul class=”second_topnav”>
    </ul>
    </div>
    </div>
    </div>
    </div>

    TomC Developer
    #476818

    Can you provide an image of what it is, exactly, you are wanting/trying to accomplish?

Viewing 4 posts - 1 through 4 (of 4 total)

This topic contains 4 replies, has 2 voices, and was last updated by  TomC 3 years, 5 months ago.

You must be logged in to reply to this topic.