Black Friday Sale!

Save up to $50 through December 3rd.

Shop Now

[Resolved] reduce gap on phone navigation menus ?

Home Forums Support [Resolved] reduce gap on phone navigation menus ?

Home Forums Support reduce gap on phone navigation menus ?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #187173
    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.
    #187199
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #187205
    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.
    #187313
    Tom
    Lead Developer
    Lead Developer

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

    #187353
    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

    #187372
    Tom
    Lead Developer
    Lead Developer

    Glad I could help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.