Help - Search - Members - Calendar
Full Version: Nav bar not displaying fully
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
rosanne5454
I have designed a page from a CSS Hub template and the Nav Bar was displaying
okay until I added coding from a JQUERY PAYPAL template I purchased in order to
set up a Store on this page. Ever since I pasted the Favicon coding to the head and
the additional coding to body, my Nav bar is no longer fully visible...I am missing the Contact
button & you can see the buttons are not lining up with the grey background image.

Here is my page: Spirit, The Musical Merchandise

Any help would be very much appreciated.
rosanne5454
http://360webmedia.com/Store/development/index.html
pandy
The row of floated buttons wrap because there isn't room for all of them and the contact button is on the row below, but it's hidden by that black-maroon thing.

div#right is 630px. Looks like that's too narrow to accommodate the 5 buttons. If I make it wider the contact button turns up.
rosanne5454
QUOTE(pandy @ Jun 25 2012, 12:48 PM) *

The row of floated buttons wrap because there isn't room for all of them and the contact button is on the row below, but it's hidden by that black-maroon thing.

div#right is 630px. Looks like that's too narrow to accommodate the 5 buttons. If I make it wider the contact button turns up.





Thanks very much for your suggestion.

I have changed the width (from 630 to 750) and it does help some but the nav bar still looks funny: I have a bg image : menu_right that is not appearing on the right that closes off the nav bar.

Also, there is something that is pushing my nav bar down so that it doesn't line up with the menu_bg.jpg. Not sure why this is happening? Could it be something from the custom.css that
came with the template? I have pasted it below...(not sure if it could be the JQUERY coding that is causing the problem?) Thanks for any help.


/* Globals */
body{
overflow:auto;
padding-top: 120px;
padding-bottom: 20px;
}

.modal-body{
max-height:300px;
overflow:auto;
max-width:100%;
}

.fl{
float:left;
}

.fr{
float:right;
}

.clear{
clear:both;
}

.tar{
text-align:right;
}

/* item specifics */

/* product details modal footer height */
.product_details_modal .modal-footer{
height:50px;
}
/* cart holder modal footer height */
#cart_holder .modal-footer{
height:80px;
}
/* show cart button top margin */
#showCart{
margin-top:40px;
}

/* Categories breadcrumb color */
#products_breadcrumb{

}
/* Current Category */
.active_category{
margin-left:1px;
}
/* Current Category link */
.active_category a{
background:#fff;
color:#FAA732;
}
#current_products_count{
margin-top:8px;
}
/* Price amount color */
.price_color{
color:#c80000;
}

/* Shopping Cart loader position*/
#shopping_cart_loader{
margin:100px auto; height:50px; width:200px; vertical-align:middle;
}

/* Product Item shadow */
.thumbnail{
border:0;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.075);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.075);
}

/* Paypal button image */
.btn_img, .btn_img:hover,.btn_img.disabled{
padding:0;
margin-bottom:0;
background:transparent;
border:0;
}

/* Thumbnail image holder */
.thumb_holder{
margin:0 auto;
height:100px;
width:150px;
overflow:hidden;
background:url(../img/ajax-loader.gif) center center no-repeat;
}

/* Product summery */
.product_sum{
min-height:70px;
}

/* sidebar navigation */
.sidebar-nav {
padding: 9px 0;
}

/* Footer */
#footer{
background:#ddd; position:fixed; bottom:0; margin-bottom:-10px; height:20px; padding:6px 8px 10px 8px;
}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.