Archived topic
reduce gap on phone navigation menus ?
5 replies · Started by Joanne Smith on April 15, 2016
Hi
I was wondering how I can reduce the GAP for the theme on a mobile phone for test site
http://test.oilandenergy.com.au/
screen shots below
1) between the Site LOGO and the Main Menu Tab -- there is a large amount of white screen and the users have to scroll down the phone too much to start viewing the main content of the website ( on all pages )
2) Reduce space Between the Menu tabs on the pull out menu plus
Once again -- for a phone it would look better to not have so much white space between the tabs themselves on a slide out menu
this is the CSS on the site
.page-header-image.grid-container {
max-width: 100%;
}
.page-header-image img {
width: 100%;
}
.page .wpb_single_image .vc_figure {
display: inherit;
}
.vc_transform .inside-article {
padding-top: 0;
}
@media (max-width: 768px) {
.vc_non_responsive .vc_row .vc_col-sm-3 {
width: 100%;
}
.vc_column-inner h1 {
font-size: 20px !important;
}
.vc_column_container {
width: 100% !important;
}
.entry-content h1 {
font-size: 60px !important;
}
.entry-content h2 {
font-size:30px !important;
}
thanks
JOanne
1. I'm not seeing the same gap?: http://screencast.com/t/a6q2jwhU3LlV
2. This CSS should work:
.nav-float-right .main-navigation.slideout-navigation .main-nav ul li a {
line-height: 30px;
}The CSS worked for the side menu
I was also wondering -- how I would COLOUR the slide out navigation ONLY on a phone -- If I colour it on the main site -- yes -- it does change on the phone BUT I what it to have a white background with red text on roll over on the main site and the on the phone the side bar has a red backround on roll over with white text on roll over -- is that possible ? ?
the GAP at the top --
strange how you don't see it
my phone -- android 4.2.2
and this site
http://www.brickandmobile.com/mobile-emulator/
and this site
http://mobiletest.me/iphone_5_emulator/?u=http://www.oilandenergy.com.au/
shows the gap --- ?
not sure if it is there or not there --maybe NEWER phones are ok !! ha
Looks like it's being caused by your site description which is all white: quality lubricant and oil distributors Perth WA
You can remove it by going to "Customize > Site Identity".
Wow
Great pick up -- it fixed the issue!!
I must have typed in the site Description when I was adding the SEO and did not know that it would affect the theme on the phone like that! IF the text was coloured I probably would have seen it - white on white -- not a hope LOL
I will be careful in the future not to let that happen again.
thank you
client will be pleased as the site went LIVE last week.
Joanne
Glad I could help :)