Jump to content

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


bowtie78
 Share

Recommended Posts

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;}

Link to comment
Share on other sites

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:

 

/* 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 ;}

Edited by bowtie78
Link to comment
Share on other sites

You need to target class .container in header only, else this class used elsewhere will be adjusted too, the container class is currently set to 960px width, so set header class to width auto, and it will adjust to fit entire width available to it.
Note you have a logo area on same row as menu.
#header-wrap .container {    width: auto;}
Link to comment
Share on other sites

To stop menu jumping left and right when you hover over

.nav ul li {    float: left;    height: 20px;    list-style: none outside none;    margin: 0 12px;    padding: 8px;}.nav ul li#active, .nav ul li:hover {    border: 2px solid #FFFFFF;    border-radius: 4px;    margin: 0 5px;    padding: 6px 13px;}
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...