BLACK FRIDAY BIGGEST SALE EVER!! Use coupon code BF33 to get 33% discount on all our products. Enjoy!

No navigation menu in mobile view

Home Forums Freedom Free No navigation menu in mobile view

This topic contains 13 replies, has 2 voices, and was last updated by  ashishsthanp 4 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1315255

    kris.mento
    Participant

    Hi

    No navigation menu appears in the mobile view of my website, which is a BIG problem. Please can you take a look and advise: http://www.kris513.co.za

    Regards,
    Kris

    #1315352

    ashishsthanp
    Moderator

    Hello, @kris.mento

    This might be caused by plugins you’re using.

    So, you can try deactivating plugins one by one and check if your issue resolves.

    If it still persists, please let us know again.

    Regards,
    ThemeGrill Support Team.

    #1315830

    kris.mento
    Participant

    Hi!

    Apologies, I posted a message, but it seems to have disappeared so I’m reposting now…

    I have activated and deactivated all my plug-ins one by one, but none of them seem to be affecting the Navigation bar/menu. Here is my navigation menu code, including the code for my mobile navigation. Please will you inspect it and see if anything is wrong or needs to be changed…

    /*————————————————————–
    ## Menus
    ————————————————————–*/
    .main-navigation {
    clear: both;
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 13;
    }

    .main-navigation ul {
    list-style: none;
    padding-left: 0;
    text-align: center;
    }

    .main-navigation li {
    float: center;
    position: relative;
    text-transform: uppercase;
    z-index: 11;
    font-family: ‘Oswald’, sans-serif;
    font-size: 16px;
    }

    .main-navigation .menu {
    display: table;
    max-width: 1500px;
    margin: 0 auto;
    }

    .main-navigation a {
    display: block;
    text-decoration: none;
    color: #7c7c7b;
    padding: 25px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-transition: background-color 0.4s;
    transition: background-color 0.4s;
    }
    .main-navigation a:hover {
    color: #fff;
    }
    .main-navigation li:last-of-type a {
    border-right: 0;
    }

    .main-navigation a:hover {
    background-color: #eeeeee;
    }

    .main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    text-align: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
    background-color: #fff;
    }

    .main-navigation ul ul ul {
    left: -999em;
    top: 0;
    }

    .main-navigation ul ul a {
    width: 200px;
    color: #595959;
    border-bottom: 1px solid #e0e0e0;
    border-right: 0;
    padding: 15px 20px;
    }
    .main-navigation ul ul a:hover {
    color: #595959;
    }
    .main-navigation ul ul li {
    text-transform: none;
    font-weight: 400;
    font-family: ‘Lato’, sans-serif;
    font-size: 14px;
    }

    .main-navigation li:hover > a,
    .main-navigation li.focus > a {
    }

    .main-navigation ul ul :hover > a,
    .main-navigation ul ul .focus > a {
    }

    .main-navigation ul ul a:hover,
    .main-navigation ul ul a.focus {
    }

    .main-navigation ul li:hover > ul,
    .main-navigation ul li.focus > ul {
    left: auto;
    }

    .main-navigation ul ul li:hover > ul,
    .main-navigation ul ul li.focus > ul {
    left: 100%;
    }

    .main-navigation .current_page_item > a,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_ancestor > a {
    }

    /* Mobile menu */

    .mobile-nav {
    display: none;
    text-align: center;
    position: relative;
    z-index: 12;
    }
    .slicknav_btn {
    display: table;
    padding: 15px;
    margin: 0 auto;
    font-size: 22px;
    }
    .slicknav_btn,
    .slicknav_btn:hover {
    color: #fff;
    }
    .slicknav_nav,
    .slicknav_nav ul {
    list-style: none;
    padding: 0;
    }
    .slicknav_nav a {
    color: #fff;
    }
    .slicknav_nav a:hover,
    .slicknav_nav a:active,
    .slicknav_nav a:focus, {
    text-decoration: none;
    }
    .slicknav_nav li {
    border-bottom: 1px solid #333;
    padding: 8px 0;
    }

    .slicknav_nav .menu-item-has-children.slicknav_open,
    .slicknav_nav .page_item_has_children.slicknav_open {
    padding-bottom: 0;
    border-bottom: 0;
    }
    .slicknav_nav .menu-item-has-children li,
    .slicknav_nav .page_item_has_children li {
    background: #111;
    }
    .slicknav_arrow {
    margin-left: 10px;
    }
    /* Posts and comments navigation */
    .site-main .comment-navigation,
    .site-main .posts-navigation,
    .site-main .post-navigation {
    margin: 0 0 45px;
    overflow: hidden;
    }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
    float: left;
    max-width: 50%;
    }

    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
    float: right;
    text-align: right;
    max-width: 50%;
    }
    .posts-navigation {
    max-width: 1500px;
    padding: 0 15px;
    }
    .nav-previous,
    .nav-next {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    }
    .nav-previous a::before,
    .nav-next a::after {
    font-family: Fontawesome;

    }
    .nav-previous a::before {
    content: ‘\f104’;
    margin-right: 5px;
    }
    .nav-next a::after {
    content: ‘\f105’;
    margin-left: 5px;
    }
    .nav-previous a,
    .nav-next a {
    text-decoration: none;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    }
    .nav-previous:hover,
    .nav-next:hover {
    background-color: #ef997f;
    }
    .nav-previous:hover a,
    .nav-next:hover a {
    color: #fff;
    }

    Regards,
    Kris

    #1315886

    ashishsthanp
    Moderator

    @kris.mento

    Can you provide us URL of your website so that we can inspect it and give you a proper solution?

    #1315922

    kris.mento
    Participant

    Hi!

    Thank you for your prompt response. My site is http://www.kris513.co.za. I have just disabled my maintenance mode so you guys can have a look.

    Regards,
    Kris

    #1316254

    ashishsthanp
    Moderator

    @kris.mento

    It seems you’re not using our theme. So, we are not able to support on your query.

    You can switch to our theme and ask again.

    Hope you understand. 🙂

    #1316318

    kris.mento
    Participant

    Hi

    Sorry, but I am DEFINITELY using the free version of the Freedom theme. I don’t understand what you mean. You’ve helped me on this exact same theme before so please advise.

    I have a screenshot that proves that this is the theme that is activated on my WordPress account, but I can’t find a way to send it to you.

    Regards,
    Kris

    #1316444

    ashishsthanp
    Moderator

    @kris.mento
    The link you’ve provided is not using our theme.
    http://www.kris513.co.za/

    #1316491

    kris.mento
    Participant

    Hi @ashishsthanp

    Please see this screenshot: http://www.kris513.co.za/wp-content/uploads/2017/07/Screen-Shot-2017-07-18-at-9.20.35-AM.png . As you can see, the URL is http://www.kris513.co.za and it clearly shows that the Freedom child theme is active on this URL.

    I don’t understand why you are saying that I’m using a different theme, when I’m not.

    Please advise so I can understand and get this issue resolved.

    Regards,
    Kris

    #1316628

    ashishsthanp
    Moderator

    @kris.mento
    Your site seems still to be in maintenance mode.
    Please disable it if it is possible so that we can inspect your menu on a mobile device and provide an appropriate solution for the issue.

    #1316646

    kris.mento
    Participant

    Hi @ashishsthanp

    Thank you very much. Maintenance mode is disabled. I look forward to receiving your feedback and getting this issue resolved! 🙂

    Regards,
    Kris

    #1316805

    ashishsthanp
    Moderator

    @kris.mento

    Add following code inside Appearance > Customize > Additional CSS :

    
    @media only screen and (max-width: 1024px){
      .main-navigation {
          display: block;
      }
    }
    
    #1316912

    kris.mento
    Participant

    Thank you very much for your help @ashishsthanp!

    #1316975

    ashishsthanp
    Moderator

    Hello, @kris.mento

    Glad to know it worked for you.

    If you get any issue later, feel free to ask again!

    We would really appreciate if you could provide us a review here:

    https://wordpress.org/support/theme/freedom/reviews/?filter=5

    Regards,
    ThemeGrill Support Team.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.