Public Forums 71,145 posts

[msager Friend msagerJoin date: December 2012Posts: 2Downloads:0Uploads:0]

#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 Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#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 msagerJoin date: December 2012Posts: 2Downloads:0Uploads:0]

#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 Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#476818

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

[Author]

Posts