/*---------------------------
Increase nav-bar margin when it tucks under
---------------------------*/
#main-header #main-nav, #main-header div.menu>ul {
margin-top: 15px;
}
@media only screen and (min-width:992px) and (max-width:1200px){
#main-header #main-nav, #main-header div.menu>ul {
margin-top: 25px;
}
}
/*---------------------------
2 elements (social icons and sponsor button)
w/ green background center at breakpoints
---------------------------*/
@media only screen and (max-width:1200px){
.wa-social-icons {
text-align: center;
width: 100%;
}
.wa-social-icons ul {
padding: 0;
padding-bottom: 10px;
}
.marine-header6-sc-style {
text-align: center;
}
}
/*---------------------------
2 feature images
Added 'col-md-6' to feature01 and feature02 in index.html so it breaks the same as the others.
Added margin-bottom so that it spaces correctly.
Last issue is that it doesn't stack correctly on sm viewport because images aren't wide enough.
Swapped out background image /img/wa-img/wa-featured-image-01.jpg from css in #featured-01 above
with a new image example that is wide enough just to show example. I'd recommend both images to be
replaced with wider images of your choosing.
---------------------------*/
@media only screen and (max-width:992px){
#featured-01 {
margin-bottom: 30px;
}
#featured-02 {
padding-top: 37px !important;
}
}
/*---------------------------
Header adjustments.
Changed mobile-nav.css
line 104-109 in from this:
#main-header,#lower-header,#upper-header
{
height:auto;
padding:20px 0;
overflow:visible;
}
to this:
{
overflow:visible;
}
And lines 86-88 from this:
.page-heading{
padding-top:10px!important;
}
to this:
.page-heading{
padding-top:0px!important;
}
---------------------------*/
/*---------------------------
Slider margin fixes and button resize.
Button has inline styles with that transform option, so this just reiterates existing
.button.biggest styles with !important marker.
Also, text on slider is positioned absolutely, so calculating the width on various mobile
viewports can give the correct margins on the left.
---------------------------*/
a.button.biggest {
padding: 20px 40px !important;
margin-top: 15px !important;
font-size: 16px !important;
}
.tp-simpleresponsive .tp-caption {
left: 20px !important;
}
@media only screen and (min-width:768px){
.tp-simpleresponsive .tp-caption {
left: calc((100% - 750px)/2) !important;
}
}
@media only screen and (min-width:992px){
.tp-simpleresponsive .tp-caption {
left: calc((100% - 970px)/2) !important;
}
}
@media only screen and (min-width:1200px){
.tp-simpleresponsive .tp-caption {
left: calc((100% - 1170px)/2) !important;
}
}
/*---------------------------
Footer overlap and margin-left fix
---------------------------*/
@media only screen and (max-width:992px){
#statement, #copyright {
float: none;
}
#statement {
margin: 1px 0;
}
}
@media only screen and (max-width:768px){
#statement, #copyright {
margin-left: 15px;
}
#lower-footer {
height: 100% !important;
}
}
/*---------------------------
Page header and breadcrumbs alignment on mobile
---------------------------*/
@media only screen and (max-width: 767px){
.page-heading {
text-align: left;
}
.page-heading .breadcrumbs {
text-align: right;
}
.page-heading .breadcrumbs {
text-align: left;
margin-left: -15px;
}
.page-heading.style3 .breadcrumbs,
.page-heading.style3 .breadcrumbs a {
color: #666;
}
}
/*---------------------------
Decrease padding in main-content.
Alternatively could remove 'small-padding' class on every
page with main-content class.
---------------------------*/
.main-content {
padding-top: 0px !important;
}
/*---------------------------
Move login-signup dropdown right on mobile
---------------------------*/
@media only screen and (max-width: 767px){
.shopping-cart-dropdown {
left: 0;
right: 0;
margin-right: 0px;
}
.shopping-cart-dropdown:after {
right: 90% !important;
}
}
/*---------------------------
Expand header so all text is legible on iphone 5ish sized screens
---------------------------*/
@media only screen and (max-width: 414px){
.tp-caption {
padding-top: 190px;
}
.tp-caption a.button.biggest {
margin-top: 80px !important;
}
#rev_slider_9_1_wrapper,
#rev_slider_9_1 {
height: 280px !important;
}
}
/*---------------------------
Decrease width of social icons so they don't line break on iphone 5
---------------------------*/
@media only screen and (max-width: 767px){
.wa-social-icons li {
width: 35px;
}
}
/*---------------------------
Make link in footer work
Changed lines 6-22 in footer.php with this.
Essentially I made it col-xs-6 and removed 'container' class from the same div as navbar-right.
I think the container class was overlaying the link. For me the link worked on
safari but not chrome. Now it seems to work on both but if it's not working for you
please let me know.
Also, the logo link works for me in the navbar in chrome and safari.
Did you by chance make a change that I don't have? Or are you using a different
browser?
---------------------------*/
/*---------------------------
Image swap on hover
Changed these two lines in footer.php
Plus the css below
---------------------------*/
#epa-footer:hover {
background:url(../img/wa-img/epa-footer-b.png);
background-repeat:no-repeat;
background-position:center;
width: 100px;
height: 60px;
}
#ecfa-footer:hover {
background:url(../img/wa-img/efca-footer-b.png);
background-repeat:no-repeat;
background-position:center;
width: 110px;
height: 90px;
}
/*---------------------------
Remove jumpiness from drop-down
---------------------------*/
@media only screen and (max-width: 838px){
.menu-item:hover {
height: 38px;
}
.menu-item {
border:none !important;
height: 38px;
}
.dropdown-opened {
height: auto !important;
}
.dropdown-opened li {
height: auto !important;
}
/*---------------------------
This bit directly below is for the sub-menu of a sub-menu in the mobile-drop down.
It always needs to display or it jumps on hover due to some JS issues.
---------------------------*/
.sub-menu .menu-item .sub-menu {
display: block !important;
}
.sub-menu {
border:none !important;
}
#main-nav li a, #header div.menu>ul li a {
margin-bottom: 3px !important;
padding-bottom: 3px !important;
}
#main-nav>li:hover>a {
margin-bottom: 0px !important;
}
}
/*---------------------------
Subscribe button in form in footer no longer gets cut off
---------------------------*/
.wa-iframe-so {
height: 200px;
}
/*---------------------------
Bruce's blog container wraps properly on mobile
---------------------------*/
@media only screen and (max-width: 467px){
.bruces-blog-container p {
margin: 0px;
margin-top: 14px;
}
}
/*---------------------------
Table scroll horizontally
For a more accurate selector, there should be a class on the plain div prior
to the div with 'list-table' class. Then change third item down with class instead
of plain div.
---------------------------*/
@media only screen and (max-width: 992px){
.blog-post-list {
display: inherit;
}
.blog-post-list .blog-post-content {
display: block;
}
.blog-post-list .blog-post-content #main_inner > div {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}
.list-table {
width: 900px;
}
}
/*---------------------------
Get link to work in nav.
This is hacky.
The navbar container right has a fixed-width and floats on top of the logo. The
link wasn't working because it counts the click on the container floating above
the logo.
A quick workaround is raising the z-index.
---------------------------*/
.logo {
z-index: 2;
}
/*---------------------------
Remove
after tags so it validates in login dropdown in header.
---------------------------*/
.shopping-cart-dropdown .sc-header ul li {
display: block !important;
}
.shopping-cart-dropdown .sc-header h4 {
float: none;
}
