[Resolved] reduce gap on phone navigation menus ?

[Joanne Smith]

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 )

http://test.oilandenergy.com.au/wp-content/uploads/2016/04/Mobile-Emulator-Test-Your-Website-On-Mobile-brickmobile-2016-04-16-08-20-07.png

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

http://test.oilandenergy.com.au/wp-content/uploads/2016/04/Mobile-Emulator-Test-Your-Website-On-Mobile-brickmobile-2016-04-16-08-17-41.png

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

• This topic was modified 8 years, 7 months ago by Joanne Smith.
• This topic was modified 8 years, 7 months ago by Joanne Smith.

[Tom]

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

[Joanne Smith]

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

• This reply was modified 8 years, 7 months ago by Joanne Smith.

[Tom]

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”.

[Joanne Smith]

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

[Tom]

Glad I could help 🙂

[Author]

Posts