New Landing How can we help? Themeforest Theme Support Supreme Navigation Bar Problem

Viewing 15 posts - 1 through 15 (of 17 total)
  • Posted in: Supreme
  • #139515
    Rob222
    Member
    Post count: 206

    Hi there,

    I’ve noticed a problem with my Navigation menu. When browsing my site using my Ipad Mini, the navigation menu drops down 2 lines when viewing in ‘Portrait’ view – So not exactly appearing great on a smaller screen size. I’ve attached a picture to show you.

    But the navigation header – ‘Shop’ drops down on a second line. Also my social icon, ‘Pinterest’, drops down to a second line making my site appear very unprofessional.

    Can you fix the above for me please and make it so that my top social icons and navigation bar links all appear only on one line?

    Thank you very much,

    Rob

    Attachments:
    You must be logged in to view attached files.
    #139627
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Add the code below to your custom css option.

    
    @media only screen and (max-width: 959px) and (min-width: 768px){
    .container .four.columns {
    width: 116px;
    }
    }
    
    @media only screen and (max-width: 959px) and (min-width: 768px){
    .container .twelve.columns {
    width: 548px;
    }
    }

    -Rui

    #139676
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Try this solution too,

    @media only screen and (max-width: 959px) and (min-width: 768px){
    #main-navigation { width: 81%; }
    #menubar-controls { width: 15%; }
    #top-bar-menu { width: 65%; }
    #top-bar-social { width: 28%; }
    }

    Sometimes, tweak the columns width may give unexpected results.

    Let us know,

    Thanks,
    laranz.

    #139785
    Rob222
    Member
    Post count: 206

    Hi Laranz, your solution worked, thank you.

    Thanks also for the help Rui.

    Much appreciated.

    #139790
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Glad it works 🙂

    Let us know, if you have any other questions.

    Thanks,
    laranz.

    #150717
    Rob222
    Member
    Post count: 206
    This reply has been marked as private.
    #151035
    Rob222
    Member
    Post count: 206

    Hi there,

    Any help please?

    #151109
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Sorry for a late response, Try this code.

    @media only screen and (max-width: 959px) and (min-width: 768px){
    #menu-main-menu li a { padding-left: 9px; }
    #main-navigation { width: 86%; }
    #main-navigation { width: 86%; }
    }

    Let us know,

    Thanks,
    laranz.

    #152191
    Rob222
    Member
    Post count: 206

    Hi Laranz,

    It worked slightly. But I still have the shop menu button and my search icon plus login icon dropped down on a second line.

    Anything else I can do to get everything on one line?

    #152306
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    Try to adjust the width % I gave in the Custom CSS.

    Let us know,

    Thanks,
    laranz.

    #152514
    Rob222
    Member
    Post count: 206

    Hi,

    Still hasn’t fixed the problem. I ended up changing the custom CSS from 86% to 100%, The navigation button ‘Shop’ jumps up to one line with the other buttons but the search icon and account icon still remain on a second line. Really annoying.

    Any more ideas?

    #152894
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi Rob,

    Can’t reproduce the situation you described.

    This is what I get by reducing the browser window(when I reduce 1 more pixel it appears the dropdown menu)

    https://www.dropbox.com/s/9zck173zkebx4pr/menu_display.png?dl=0

    Can you take a screenshot of what you are seeing? Clear the cache first.
    thanks

    -Rui

    #152895
    Rob222
    Member
    Post count: 206

    Your screenshot shows exactly what I see on my ipad mini. You will notice that the search icon and account icon have dropped down to a second line. I want those two icons to be up next to the shop button.

    #152925
    laranz – SUPPORT
    Member
    Post count: 3186

    Hi,

    My bad, I gave a wrong CSS ( copy paste the same styles in the second line. doh. )

    Try this one.

    @media only screen and (max-width: 959px) and (min-width: 768px){
    #menu-main-menu li a { padding-left: 9px; }
    #main-navigation { width: 86%; }
    #menubar-controls { width: 10%; }
    }
    

    Let us know,

    Thanks,
    laranz.

    #153039
    Rob222
    Member
    Post count: 206

    Hi there,

    The search icon and account icon are now up on one line. Which is good. But there’s still a problem. One button – ‘Shop’ button has now dropped down a second line. Can you suggest a way to bring the shop button up onto just one lines please?

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register