Forum Replies Created
-
AuthorPosts
-
TmgaleMember
Thanks for the reply!
I added that code but it hasnt solved the issue.
If you view the footer and slowly reduce the page size, you will see them become 'jumbled up' at certain points, as opposed to stacking undereach other neatly.
I only have this issue with a 4 column layout, any ideas how to fix it?
Thanks 🙂
TmgaleMemberThanks for the reply davinder, I added the code to the bottom of the style sheet but it did not work. I also tried with !important.
I am using a mobile menu at 1000px and below, however it shows the secondary menu.
The url is http://rewards.allcleartravel.co.uk/
Do you think I need to add something to my mobile menu code?
The code for the responsive menu is:
/* Navigation toggles
--------------------------------------------- */.sub-menu-toggle,
.menu-toggle {
display: none;
visibility: hidden;
}/* Navigation toggles - Ensure Menu Displays when Scaled Up
--------------------------------------------- */
@media only screen and (min-width: 1191px) {nav {
display: block !important;}
}/* Navigation toggles - Mobile (Change max width as you see fit)
--------------------------------------------- */
@media only screen and (max-width: 1000px) {.nav-secondary {
visibility: hidden !important;}
.menu-toggle,
.sub-menu-toggle {
display: block;
font-size: 16px;
font-size: 2rem;
font-weight: 700;
margin: 0 auto;
overflow: visible;
padding: px;
padding: ;
text-align: center;
visibility: visible;
}button.menu-toggle {
background-color: #33abdf;
color: #fff;
float: ;
width:100%}
button.sub-menu-toggle {
background-color: transparent;
color: #fff;
padding-bottom:px;
margin-top: -30px;}
.sub-menu-toggle {
padding: 18px;
padding: 1.8rem;
position: absolute;
right: 0;
top: 0;
}.menu-toggle:after {
content: "\2261";
float: ;
}.menu-toggle:before {
content: "menu";
float: ;
padding-right: 5px;}
.menu-toggle.activated:before {
content: "\2191";
}.sub-menu-toggle:before {
content: "+";
}.sub-menu-toggle.activated:before {
content: "-";
}nav {
display: none;
position: relative;
}.genesis-nav-menu .menu-item {
background-color: #33abdf;
display: block;
position: relative;
text-align: left;
padding: 5px;
margin-right: 50px;}
.genesis- nav-menu .menu-item:hover {
position: relative;
}.genesis-nav-menu .sub-menu {
clear: both;
display: none;
opacity: 1;
position: static;
width: 100%;
}.genesis-nav-menu .sub-menu a {
border-left: 0;
position: relative;
width: auto;
}.genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}.genesis-nav-menu .sub-menu .sub-menu a {
background-color: #fff;
padding-left: px; 30
}.genesis-nav-menu .sub-menu .sub-menu .sub-menu a {
background-color: #000000;
padding-left: px;
}.nav-primary a:hover,
.nav-primary .current-menu-item > a {
color: #fff;
}}
}TmgaleMemberSorry I had it published to private. Its now on public, I think its due to the header why this occurring.
I postitoned the logo and the nav bar to be central, but i suspect that this has caused the issue. Any ideas?
thanks
TmgaleMemberNice!!
So should I add directly below the first bit of code, or the bottom of the style sheet?
Thanks so much for the help! :):)
I added it and it worked!!!
Thanks so much for your help jamie!!
TmgaleMemberYeah, its to the right of the whole of the page, the footer and header.
It only happens when you change
@media only screen and (max-width: 960px) {
.site-inner,
.wrap {
max-width: 800px; to 100%
}-Happens on any max-width.
Annoying becuase I need 100% width for content to display correctly, but it causes the white space.
TmgaleMemberYeah the mobile drop down menu is a issue that I am aware of at the moment but I cant work out how to fix it.
In regards to the orignal issue, if you view tablet or mobile and you scroll to the right of the page you will see the 'blank' space. Its only visable if you physically scroll to see it.
Thanks jamie!
*edit*
View in http://responsivetest.net/#u=http://www.allcleartravel.com/au/|1090.5|809.5|1
for example
TmgaleMember -
AuthorPosts