Docs

[Lizzie]

http://www.skeenaflyfishing.com

1) My mobile menu doesn’t want to stay within the top nav bar with the logo.
2) It causes my Revolution Slider to overlap the text on my site by pushing it down in its div

3) Would like the menu to sit directly under the logo in the same div as each other

4) When my menu expands, the first two items appear, with transparent backgrounds and the rest of the menu is hidden.

I currently have the following custom CSS:

@media only screen and (max-device-width: 480px) {

.x-brand img{
width:70%;
display: block!important;
margin-left: 15%;
margin-right:15%;
}

#half-day-intro{
font-size:10px;
}

#daytrip-price-header{
font-size:14px;
margin-top:10px!important;
margin-bottom:-15px!important;
}

#hl{
margin-top:-50px!important;
}

#dt-text{
margin-bottom:100px;
}

#half-day-pricing{
width:100%;
margin:auto;
}

#full-day-pricing{
width:100%;
margin:auto;
}

.man{
font-size:16px!important;

}

.x-li-icon{
font-size:4px!important;
}

.price_block{
margin-bottom:20px;
width: 50%!important;
float:left;
}

#post-259 > div > div > h2 > span{
font-size:14px;

}

#x-content-band-1 > div.x-prompt.message-left > div.x-prompt-section.x-prompt-section-message > p{
font-size:14px;
text-align:center;}

#x-content-band-1 > div.x-prompt.message-left > div.x-prompt-section.x-prompt-section-message > h2{
font-size:20px;
text-align:center;
}

#daytrip-text-body{
font-size:12px;
}

#daytrip-text-header{
text-align:center;
font-size:14px!important;
margin-top:0px!important;
margin-bottom:-10px;
}

#guide-links{
margin:auto;
margin-bottom:-30px!important;
padding-bottom:-20px!important;
}

#daytrip{
width:50%;
float:left;
}
#multidaytrip{
width:50%;
float:left;
}

.guide-header{
font-size:17px;
margin-bottom:-20px!important;
margin-top:10px;
}
#mal-id{
font-size: 10px!important;
line-height:5px!important;
margin-top:-15px!important;
}

#x-content-band-7{
margin-top:-20px !important;
margin-bottom:-50px !important;
}

#home-photo{
margin-bottom:15px;
}

#d-map{
display:none !important;
}

#mobile-map{
display:inline!important;
margin-bottom:-60px!important;
}

#guiding{
width:30%;
float:left;
font-size:50%;
margin-left:3.5%;
}
#lessons{
width:30%;
float:left;
font-size:50%;
margin-left:1.5%;
}
#lodging{
width:30%;
float:left;
font-size:50%;
margin-left:1.5%;
}

#home-left{
font-size:11px;
margin-top:-30px;
}

#home-right{
margin-top:30px;
margin-bottom:-60px;
}
#mal-quote{
font-size:10px!important;
line-height:15px !important;
}

#home-bottom-left{
width:50%;
float:left;
margin-bottom:-40px!important;
}

#home-bottom-right{
width:50%;
float:left;
margin-bottom:-40px!important;
}

#home-fly{
width:35%;
}

#home-text-header{
text-align:center;
font-size:14px;
margin-top:15px;
}

#join-us{
font-size:17px;
padding-top:20px!important;
}

#x-content-band-7{
padding-top:0px !important;
}
.x-container-fluid.max.width.offset.cf{
margin-top: -50px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#home-header{
font-size:14px!important;
margin-bottom:-20px;
}
}

//end of mobile style

.x-container-fluid.max.width.offset.cf{margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

.x-header-landmark{
border-width:0px;
padding-bottom: 0px;
}

#home-photo{
margin-top: 115px;
}

#top {
background-color:white;

}

.x-navbar .sub-menu li{
font-size: 18px;
color: #019a88;

}
.x-navbar .sub-menu{
margin-top:5px!important;

}

.p-prompt{
font-size:22px;
}

.h-prompt{
font-size:26px;
}

.x-nav-tabs-item{
font-size:22px;
}

#home-header{
margin-top:20px;
font-size:130%;

}

#guide-header{
margin-top:20px;
font-size:130%;

}

.x-nav-collapse,.x-nav-collapse.collapse {
overflow: hidden;
height: auto;
}

#menu-main{
padding-top:45px!important;
height:150px!important;
}

.x-btn-navbar, .x-btn-navbar.collapsed {
font-size: 20px;
border: 1px solid #eee;
overflow: hidden;
width:100%;
}
i.x-icon-bars:after {
font-family:Josefin Sans;
content: ‘Mobile Menu’;
padding: 0 10px;
}

#mobile-map{
display:none;
}

#x-content-band-4{
margin-top:-60px!important;
}

#x-content-band-3{
margin-bottom:30px!important;
}

#x-content-band-1{
padding-bottom:0px!important;
}

#x-content-band-2{
padding-bottom:0px!important;
margin-bottom:-30px!important;
}

#mal-pic{
margin-top:20px!important;
}

#post-259 > div > div > div.x-columnize > div:nth-child(1) > div:nth-child(2){
border-style: solid;
border-width: 5px;
}

#post-259 > div > div > div.x-columnize > div:nth-child(1) > div:nth-child(1){
border-style: solid;
border-width: 5px;
}

#post-259 > div > div > h5 > em > a{
color: #019a88;
}

#join-us > a > em{
color: #019a88;
}

#home-right{
margin-top:30px!important;
}

#join-us{
margin-bottom:0px;
}

.guide-header{
margin-bottom:40px;
}

#guide-links{
margin-bottom:-30px;
}

#half-day-header{
text-align:center;
margin-bottom:-20px;
margin-top:-10px!important;
}

.man{
font-size:25px!important;
}

#post-259 > div > div > h2 > span > a{
color: #019a88;
}

#weekend-tab-nav{
font-size:40px!important;
}

#home-text-body{
font-size:75%;
}

#x-content-band-1 > div > div:nth-child(1) > p:nth-child(1){
display:none;}

#post-259 > div > div > p{
display:none;
}

.x-nav-tabs {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
.x-nav-tabs.top>li {
border-right: 2px solid #000;
}

.x-nav-tabs.top>.active>a, .x-nav-tabs.top>.active>a:hover {
border-bottom: 2px solid #000;
background-color: black;
color: white;
font-size:20px;
}

.x-nav-tabs.top>li a {
border-bottom: 2px solid #000;
font-size:20px;
}

.x-nav-tabs>li>a {
color: #000;
background-color: #f8f8f8;
font-size:20px;
}

#multi-tab-header{
margin-top:-10px!important;
}

.x-price{
font-size:175%!important;
}

#mal-quote{
font-size:120%!important;
}

#daytrip-text-body{
font-size:75%!important;
}

#daytrip-text-header{
font-size:95%!important;
}

#top > header{
height:100px;
}

#top > header > div > div{
height:150px;
margin-bottom:0px!important;
padding-bottom:10px!important;
border-bottom-style: solid;
border-bottom-width:5px;
border-bottom-color: #7A7A7A;
}

#top > header{
margin-bottom:0px!important;
height:150px;
background-color: #7A7A7A;

}

.x-navbar-wrap{
height:150px;
}

h5{
font-size{
50%;
}

[Rad]

Hi Brian,

Thanks for posting in.

1. It’s intended not to stay on top on mobile (fixed navbar) due to many issues, like navbar has varying height on mobile which we can’t define proper offset (no top offset will clip/overlap next element). But you may try this,

@media (max-width: 979px) {
.masthead {
position: fixed;
width: 100%;
z-index: 999;
top: 0;
}
body {
padding-top: 200px;
}
}

This will have unusual effect on your very long menu. Since its fixed on its position, there is no way you could navigate to other menu items.

2. Because of set static height, remember on mobile height is changing. Setting it to fix will cause many issues.

#top > header {
margin-bottom: 0px!important;
height: 150px;
background-color: #7A7A7A;
}

#top > header > div > div {
height: 150px;
margin-bottom: 0px!important;
padding-bottom: 10px!important;
border-bottom-style: solid;
border-bottom-width: 5px;
border-bottom-color: #7A7A7A;
}

Remove the height, or at least use min-height instead of height.

3. Just fix the height, and it will stay on same div under the logo.

4. Again, its because of added height.

#menu-main {
padding-top: 45px!important;
height: 150px!important;
}

Remove this.

Cheers!

[Lizzie]

This reply has been marked as private.

[Paul R]

Hi Brian,

To fix it, you can add this under Custom > CSS in the Customizer.

body header.masthead {
    min-height: 201px;
}

Hope that helps.

[Lizzie]

Hi There,

Thanks for your help. I tried adding the min-height in, but it appears as though the rev slider and the nav bar live in the same div? There doesnt seem to be enough room to hold both of them.

Even on my desktop version now, the slider either crops the top of the body section initially or when you scroll the slider gets cropped at the top.

Is there any way to get these items out of the same div? I don’t get to control where either of them live from a code standpoint and feeling like my options are limited here.

Thanks 🙂

[Lizzie]

i added a margin to the top of the slider and a corresponding margin to the first content band on the page and that seems to have sorted out the spacing problem.

the mobile sub menu is now showing a gap and doesn’t start displaying until below the slider.

i tried adding a negative margin with :

.x-navbar .sub-menu{
margin-top:-10px!important;
}

but it doesn’t seem to be working. Is there any other way to alter the space at the top of he mobile sub menu?

[Christian]

Hey Brian,

Please add the code below in the Appearance > Customize > Custom > CSS.

@media (max-width: 979px) {
.x-nav-collapse #menu-main {
padding-top: 0 !important;
margin-top: 0 !important;
}
}

Hope that helps. 🙂

[Author]

Posts