Support » Theme: SpicePress » Header Navbar is shown differently in desktop and in mobile and tablet version

  • Resolved exaattositeadmin

    (@exaattositeadmin)


    Header Navbar is shown differently in desktop and in mobile and tablet version. In desktop, I have white coloured header navbar with black font and on hover, its white font with black background. However, on mobile and tablet, its black navbar with white menu icons and on being active, its white background with white font.

    Please help me with this issue to have similar colour scheme for navbar in desktop as well as mobile version

    Screenshot from mobile device: https://prnt.sc/mheru1

    Thanks

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi exaattositeadmin

    I just check you site in mobile device I did not face such type of issue in sub menu as you shared in screenshot please clear your browser cache and then check. Please have a look in screen shot http://prntscr.com/mhfg5b

    For your second query to make menu similar in mobile as desktop.

    Please have a look in screenshot and confirm us you want to show menu in mobile device just like this http://prntscr.com/mhfdle

    Let us know so we provide you custom css for this.

    Thanks
    A

    Hi Abhishek,

    For the first part, I checked again after clearing the cache and sub-menu item are still in white colour with white background. They are “Anchor links” and behaving differently in mobile version. Also, they are pointing to the top of page when the link is placed on another page. This is working fine on desktop version of website

    For the second query, yes I would like to have CSS something like that.

    Thanks

    Hi

    To show menu in mobile just like a desktop version.Please add the given css code in Additional css box.

    @media (max-width: 1100px){
    .navbar-custom .navbar-nav {
    background-color: #ffffff;
    }
    .navbar-custom .navbar-nav>li>a:focus,
    .navbar-custom .navbar-nav>li>a:hover {
    color: #000000;
    }
    navbar-custom .navbar-nav li>a {
    color: #000000;

    }
    .navbar-custom .dropdown-menu>.active > a {
    color: #bbb;
    }
    .navbar-custom .dropdown-menu>.active>a:hover,
    .navbar-custom .dropdown-menu>.active>a:focus {
    color: #000000;
    }
    }

    Let me know did it work for you.

    Thanks
    A

    Hi,

    Navbar for mobile worked fine.

    For the first part, can you also help with the fix for anchor links in mobile website.

    Thanks

    Hi exaattositeadmin

    Glad to know its work for you.

    Please create a new thread for your second query. Multiple query in single thread create complexity to handle better support query.

    Hope you understand.

    Thanks
    A

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header Navbar is shown differently in desktop and in mobile and tablet version’ is closed to new replies.