How to span Weebly Navigation Menu across the whole web page(s)

bowtie78 · August 16, 2014

Hello,

I have searched for a while now to find a way to span my Weebly navigation menu across the whole web page(s). I have tried changing the widths, margins and paddings but no combination that I have used has produced the desired outcome. My goal is to span the navigation menu so that all the page links are in single file. I appreciate any help that can be provided, here is my CSS code:

/* Resets--------------------------------------------------------------------------------*/ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,fieldset, input { margin: 0; padding: 0;}

a img { border: 0;}

a { text-decoration: none;}

::-webkit-input-placeholder { color: #626262;}

:-moz-placeholder { /* Firefox 18- */ color: #626262; }

::-moz-placeholder { /* Firefox 19+ */ color: #626262; }

:-ms-input-placeholder { color: #626262; }

#header .wsite-search-input::-webkit-input-placeholder { color: #fff;}

#header .wsite-search-input:-moz-placeholder { /* Firefox 18- */ color: #fff; }

#header .wsite-search-input::-moz-placeholder { /* Firefox 19+ */ color: #fff; }

#header .wsite-search-input:-ms-input-placeholder { color: #fff;}

/* General Styling and Structure--------------------------------------------------------------------------------*/html { height: 100%;}

body { height: 100%; font-family: 'Open Sans', sans-serif; font-size:16px; line-height:1.75em; color:#666666; background: #232323 url('default-bg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed;}

.container { margin: 0 auto; width:960px;}

#header-wrap,#main-wrap,#footer-wrap{ width:100%; margin:0 auto;}

a { color: #2a92e5 ;}

a:hover { color: #2180cc;}

h2 { font-size: 26px; padding: .5em 0 .2em 0; line-height: 1.2em; font-weight: 600; color:#333; text-transform:uppercase;}

p { font-size: 16px; line-height: 1.5; padding: .5em 0; color: #666;}

blockquote { font-size: 16px; line-height: 28px; color: #666666; padding: 1em; margin: 2em 0; border-left: 0px !important;}

div#content {min-height:400px;}

.styled-hr { background-color: #ccc; height: 2px;}

#splash-wrap .styled-hr { background-color: #fff;}

/*WSITE BACKGROUND---------------------------------------------------------------------------------*/.tall-header-page,.short-header-page,.no-header-page,.landing-page { background: #232323;}

.tall-header-page .wsite-background,.short-header-page .wsite-background,.landing-page .wsite-background { background: transparent url('default-bg.jpg') center center no-repeat; background-size: cover; background-attachment: fixed;}

.tall-header-page,.landing-page,.short-header-page { background-image: none;}

.tall-header-page #header-wrap { /*background-image: url(tall-header.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;*/ padding: 25px 0 12px;}

.landing-page #header-wrap { /*background-image: url(landing-header.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;*/ padding: 90px 0 12px 0; -moz-box-sizing: border-box; box-sizing: border-box; height: 630px; overflow: hidden;}

.short-header-page #header-wrap { /*background-image: url("small-header.jpg"); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;*/ padding: 25px 0 12px;}.splash-page #header-wrap { padding: 25px 0 0; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box;}

.no-header-page #header-wrap { background: #343434; padding: 10px 0;}

/*Header-wrap-------------------------------------------------------------------*/#logo,#logo a { font-size: 24px; font-weight: 500; font-family: 'Open Sans', sans-serif; color: #fff; text-transform: uppercase;}

#header { border-collapse: collapse; border-spacing: 0; height: 40px;}

#wsite-title, #logo img { display: block; max-height: 60px; overflow: hidden;}

.no-header-page #header { width: 100%;}

#header td { vertical-align: middle; text-align: right;}

#header td#logo { text-align:left;}

#header table { float: right; width: 1px;}

#header td { padding: 0;}

.landing-page #menu-wrap,.tall-header-page #menu-wrap,.short-header-page #menu-wrap,.splash-page #menu-wrap,.no-header-page #header-wrap { position: fixed; width: 100%; top: 25px; left: 0; z-index: 999;}

.no-header-page #header-wrap { top: 0;}

.no-header-page { padding-top: 90px;}

/* Header: Social Links--------------------------------------------------------------------------------*/#header-right .wsite-social { vertical-align: middle;}

.wsite-social-item { width: 36px; height: 36px; margin: 0 0 0 8px;}

.wsite-social-rss { background: url(social-icons.png) no-repeat -321px -12px; }.wsite-social-rss:hover { background-position: -321px -54px; }

.wsite-social-linkedin { background: url(social-icons.png) no-repeat -143px -12px; }.wsite-social-linkedin:hover { background-position: -143px -54px; }

.wsite-social-facebook { background: url(social-icons.png) no-repeat -54px -12px; }.wsite-social-facebook:hover { background-position: -54px -54px; }

.wsite-social-twitter { background: url(social-icons.png) no-repeat -9px -12px; }.wsite-social-twitter:hover { background-position: -9px -54px; }

.wsite-social-mail { background: url(social-icons.png) no-repeat -187px -12px; }.wsite-social-mail:hover { background-position: -187px -54px; }

.wsite-social-pinterest { background: url(social-icons.png) no-repeat -277px -12px; }.wsite-social-pinterest:hover { background-position: -277px -54px; }

.wsite-social-youtube { background: url(social-icons.png) no-repeat -455px -12px; }.wsite-social-youtube:hover { background-position: -455px -54px; }

.wsite-social-plus { background: url(social-icons.png) no-repeat -98px -12px; }.wsite-social-plus:hover { background-position: -98px -54px; }

.wsite-social-flickr { background: url(social-icons.png) no-repeat -232px -12px; }.wsite-social-flickr:hover { background-position: -232px -54px; }

.wsite-social-vimeo { background: url(social-icons.png) no-repeat -366px -12px; }.wsite-social-vimeo:hover { background-position: -366px -54px; }

.wsite-social-yahoo { background: url(social-icons.png) no-repeat -410px -12px; }.wsite-social-yahoo:hover { background-position: -410px -54px; }

/* Header: Search Box--------------------------------------------------------------------------------*/#header .wsite-search { vertical-align: middle; border: 2px solid #fff; border-radius:4px; position:relative;}

#header .wsite-search-input { width: 145px; height: 21; border: 0; padding: 3px 5px !important; font-family: 'Open Sans', sans-serif; color: #fff; font-size: 13px; background: none; float:left;}

#header .wsite-search-button { position: relative; width: 46px; height: 21px; border: 0; padding: 4px 0; background: url("submit-bg.png") no-repeat right center; cursor: pointer;}

#header .wsite-search-cover { position:absolute; width:50px; height:30px; right:0px; top: 0px; z-index:1; cursor: pointer;}

/* Navigation--------------------------------------------------------------------------------*/.nav { padding: 0 0 0 20px !important;}

.nav ul{ list-style: none; float:right; overflow: hidden;}

.nav ul li { list-style: none; float:left; margin-right:10px; padding:8px 10px; height:20px;}

.nav ul li#active,.nav ul li:hover { border:2px solid #fff; border-radius:4px; padding:6px 13px;}

.nav ul li a { float:left; display: block; color:#fff; text-decoration:none; text-transform:uppercase; font-weight: 500; border: 0; outline: 0; list-style-type: none; font-size:13px; line-height:20px;}

#nav-wrap .container ul li#active a,#nav-wrap .container ul li a:hover { color: #fff; background: none !important; border: 0;}

.landing-page:before,.splash-page:before,.tall-header-page:before,.short-header-page:before { content: ''; width: 100%; height: 130px; position: fixed; top: 0; left: 0; background: transparent url('menu-bg.png') left top repeat; z-index: 1;}

/* Navigation Submenu's--------------------------------------------------------------------------------*/#wsite-menus .wsite-menu { position:relative; margin-top:11px;}

#wsite-menus .wsite-menu li ul:after { content: ""; width: 0px; height: 0px; border-style: none; border-width: 0 0px 0px 0px; border-color: transparent transparent transparent transparent; position:absolute; top:-6px; left:16px;}

#wsite-menus .wsite-menu:after { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 5.5px 6px 5.5px; border-color: transparent transparent #232323 transparent; position:absolute; top:-6px; left:16px;}

#wsite-menus .wsite-menu li:first-child a { -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; border-top-left-radius: 3px;}

#wsite-menus .wsite-menu li:last-child a { -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}

#wsite-menus .wsite-menu li a { background: #232323; font-family: 'Open Sans', sans-serif; font-size:13px; color:#cecece; border:0; border-bottom: 1px solid #313131;}

#wsite-menus .wsite-menu li a:hover { color:#fff; background:#2a2a2a ;}

/* Universal banner--------------------------------------------------------------------------------*/#banner td { vertical-align: middle !important; text-align: center; }

#banner h2, #splash-wrap h2 { color: #fff; font-size: 60px; padding: 0px;}

#banner p { color: #fff; font-size: 20px; font-family: 'Open Sans', sans-serif; padding: 20px 0 40px; text-transform: uppercase;}

.tall-header-page #banner h2 { font-size: 50px;}

.short-header-page #banner h2 { font-size: 40px;}

.landing-page .banner-wrap .container,.tall-header-page .banner-wrap .container,.short-header-page .banner-wrap .container { display: table;}

.landing-page .banner-wrap #banner,.tall-header-page .banner-wrap #banner,.short-header-page .banner-wrap #banner { background: none; padding: 0; display: table-cell; text-align: center; vertical-align: middle; width: 100%;}

/* Page type: Tall header--------------------------------------------------------------------------------*/.tall-header-page #banner { height: 335px; text-align: center;}

.tall-header-page .banner-wrap { display: table; width: 100%; height: 340px;}

/* Page type: Short header--------------------------------------------------------------------------------*/.short-header-page #banner { height: 237px; text-align: center;}

.short-header-page .banner-wrap { display: table; width: 100%; height: 240px;}

/* Page type: No header--------------------------------------------------------------------------------*/.no-header-page .banner-wrap { display:none;}

/* Splash Page------------------------------------------------------------------------------*/#splash-wrap { width: 100%; height: 100%; text-align: center; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 90px; padding-bottom: 90px; display: table; width: 775px; margin: 0 auto;}

#splash-wrap .container { width: 775px; margin: 0 auto; text-align: center; margin-top: 0; vertical-align: middle; display: table-cell;}

#splash-wrap .container .main-wrap { background: rgba(0,0,0,0.5); border-radius: 8px;}

.splash-page .main-wrap #content-section { text-align: center; padding: 50px 74px;}

#splash-wrap .paragraph { color: #fff; font-size: 14px;}

/* Page type: Landing page--------------------------------------------------------------------------------*/.landing-page #header-wrap { position: relative;}

.landing-page #header-wrap .banner-wrap { position: absolute; height: 100%; width: 100%; top: 0; left: 0;}

.landing-page .container { display: table; width: 960px; height: 100%; margin: 0 auto;}

.landing-page .button-wrap { display: inline-block;}

/* Main Content--------------------------------------------------------------------------------*/#main-wrap { background-color:#fff; padding: 30px 0 25px;}#main-wrap .container { min-height:400px;}

#main-wrap .container a { color:#2a92e5;}#main-wrap .container a:hover { color:#2180cc;}

#main-wrap .paragraph ul#main-wrap .paragraph ol { margin: 0 !important; padding: 0 !important;}#main-wrap .paragraph li { padding-left: 10px !important; margin-left: 20px!important;}

.container form textarea{ min-height:100px;}

/* Image-----------------------------------------------------------------------------*/html body .galleryImageBorder, html body a .galleryImageBorder { border-radius: 15px; border: 0;}

.wslide { font-family: inherit;}

.wslide .wslide-caption { opacity: 0 !important; filter: alpha(opacity=0) !important; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; bottom: 0; top: 0;}

.wslide:hover .wslide-caption { opacity: 1 !important; filter: alpha(opacity=100) !important;}

.wslide-caption-bg { background-color: #288ad8 !important; opacity: 0.85 !important; filter: alpha(opacity=85) !important;}

.wslide-caption:before { content: ''; display: inline-block; vertical-align: middle; height: 100%;}

.wslide-caption-text { display: inline-block; vertical-align: middle; text-align: center !important; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px;}

/* Footer--------------------------------------------------------------------------------*/#footer-wrap { text-align:right; background-color:#232323; font-size:13px; color:#999999;}

#footer-wrap .container { padding: 50px 0 20px;}#footer-wrap .container h2 { border-bottom: 1px solid #3b3b3b; color: #fff; font-size: 14px; margin-bottom: 10px; padding-bottom: 8px; font-weight:normal; }

#footer-wrap .container p { color: #999; font-size: 13px;}#footer-wrap .container blockquote { color: #999; font-size:13px;}

#footer-wrap .paragraph ul#footer-wrap .paragraph ol { margin: 0 !important; padding: 0 !important;}

#footer-wrap .paragraph li { list-style: none; background: url(bullets.png) no-repeat left 8px; padding-left: 15px !important;}#footer-wrap .wsite-form-container { text-align:left; margin-top:0px !important;}

#footer-wrap .wsite-form-input,#footer-wrap .wsite-search-element-input { font-family:'Open Sans',sans-serif; font-size: 13px; color: #626262; background: #181818; border: 0; padding: 10px 6px !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

#footer-wrap .form-select { color: #626262; border: 0; font-size: 13px; font-family:'Open Sans',sans-serif; font-style: italic; padding: 10px; width: 380px ; height: 40px!important; line-height: 15px; background: #181818; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

/* Form Customization--------------------------------------------------------------------------------*/.wsite-form-label { display: inline-block; color:#626262; font-family: 'Open Sans', sans-serif; font-size:13px; font-style:italic; font-weight:normal;}

.form-radio-container { color:#626262 ; font-size:13px; font-family: 'Open Sans', sans-serif;}

.wsite-form-input, .wsite-search-element-input { font-family:'Open Sans',sans-serif; font-size:13px; color:#626262; background:#e5e5e5; border:0; padding: 10px 6px !important; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

.form-select { color:#626262; border: 0; font-size:13px; font-family:'Open Sans',sans-serif; font-style:italic; padding:10px; width:380px ; height:40px!important; line-height:15px; background:#e5e5e5; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

#footer-wrap .wsite-form-input,#banner-wrap .wsite-form-input,#splash-wrap .wsite-form-input { background-color: #181818;}

/* Light/Base Buttons--------------------------------------------------------------------------------*/.wsite-button { display: inline-block; background: #2a92e5; font-size: 13px; color: #fff !important; text-transform: uppercase; border-radius: 4px;}

.wsite-button:hover { background-color: #288ad8;}

.wsite-button-inner { background: transparent !important;}

/* Highlighted styles */.wsite-button-highlight { background: #cecece !important;}

.wsite-button-highlight:hover { background-color: #c2c2c2;}

/* Dark Buttons--------------------------------------------------------------------------------*/.banner-wrap .wsite-button-highlight,#footer-wrap .wsite-button-highlight,#splash-wrap .wsite-button-highlight { background: transparent !important; border: solid 2px #fff;}

.banner-wrap .wsite-button-highlight:hover,#footer-wrap .wsite-button-highlight:hover,#splash-wrap .wsite-button-highlight:hover { background: rgba(255,255,255,0.2) !important;}

/* Blog--------------------------------------------------------------------------------*/.blog-sidebar h2 { font-size: 16px;}

#commentArea { border-top: solid 1px #dadada; padding-top: 20px;}

.blog-sidebar h2,h2.blog-title,#commentAreaTitle,.blogCommentHeading .blogCommentAuthor { font-weight: 500;}

.blog-post .blog-header h2.blog-title { margin-bottom: 20px !important;}

#main-wrap .blog-title a { color: #333;}

#wsite-content #commentAreaTitle,#wsite-content #commentReplyTitle,#commentArea .blogCommentText p,#main-wrap .blog-sidebar h2 { padding: 0;}

#commentAreaTitle,.blogCommentHeading,.blogCommentText p { font-family: inherit;}

.blogCommentWrap { padding: 20px; border: solid 1px #ccc; border-radius: 6px; background: none;}

.blogCommentWrap .blogCommentHeading,.blogCommentWrap .blogCommentHeadingInner,.blogCommentWrap .blogCommentAuthor { background: none !important;}

.blogCommentHeading .blogCommentAuthor span.name,.blogCommentHeading .blogCommentAuthor span.email { color: #2a92e5 !important; float: none; line-height: 1;}

.blogCommentHeading .blogCommentAuthor { margin-bottom: 10px;}

.blogCommentHeading { padding: 0; margin-bottom: 20px;}

.blogCommentHeading .blogCommentHeadingInner { height: auto;}

.blogCommentHeading .blogCommentAuthor,.blogCommentHeading .blogCommentDate { float: none; text-align: left; height: auto; line-height: 1; padding: 0;}

.blogCommentHeading .blogCommentAuthor { text-transform: uppercase;}

.blogCommentHeading .blogCommentDate { color: #333;}

.blogCommentText { padding: 0;}

.blogCommentText p { color: #666; font-size: 14px;}

/* Transitions--------------------------------------------------------------------------------*/.wsite-form-input,.wsite-search-element-input,.form-select,.wsite-button { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transition-property: border-color, background-color, color; -moz-transition-property: bord -moz-transition-property: border-color, background-color, color;er-color, background-color, color; -o-transition-property: border-color, background-color, color; transition-property: border-color, background-color, color;}

dsonesuk · August 16, 2014

relevant css and html only.

dsonesuk · August 16, 2014

relevant css and html only.

bowtie78 · August 16, 2014

Can you elaborate on that dsoneuk?

dsonesuk · August 16, 2014

OK! give us CSS and HTML relating to navigation or link to website, nothing more, else people will just ignore, and don't double post.

bowtie78 · August 16, 2014

Ok, I assumed more code was better. My apologies, I didn't realize I double posted. Here is a link http://www.annarescuesquad.com/links.html and here is the navigation code: