Home / Forums / You Theme Support / How to disable or alter Dock Bar in Mobile view

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts

  • Mike
    Participant

    When viewed in mobile, the Dock Bar with added custom menu pushes things vertically. I’d like to either set it to span horizontally in mobile view, or disable the menu entirely. Is this possible?

    Thanks!

    Can you please send over your site’s URL and login credentials so we can personally check the issue?

    Thanks!


    Mike
    Participant
    This reply has been marked as private.

    Hi @talanithus

    The Dock Bar should now be disabled on mobile. Do you also want the texts ‘Locations’ ‘Become a Franchise’ and ‘PAP Perks’ hidden on mobile?

    Thanks!


    Mike
    Participant

    Ideally, I’d like to be able to control how they appear. The Locations menu item is crucial to properly accessing information, so it needs to stay in the mobile menu as well. However, the presentation is not what I would call professional.

    For a simple fix, if the top dock bar menu “Locations Franchising PAP Perks” displayed horizontally instead of vertically, it would go a long way towards making it more usable. However, the menu seems to lose its styling when it is converted to mobile (white links on red background), and reverts to black text (although still a link). What are the relevant CSS classes for the Dock Bar Widget (where the menu is located) in the mobile view?

    Many thanks for all of your assistance!

    Hi @talanithus

    The only way to control them would be via CSS. We can try to minimize the padding the dimensions of the icons so they stay in one line. If you want the icons “grouped” on mobile, that requires a lot of customization which we do not support.

    You can use this CSS to style the links on the dock bar. This will update the color to white. You can add more properties to style those links.

    .dock-tab-wrapper.static.infodock ul li a {
        color: #ffffff;
    }

    Just a reference in the future, you can easily identify the CSS classes for specific elements by using Firebug/Chrome Dev Tools. Just press on F12 on your keyboard while you have the site opened and it will reveal the HTML and CSS codes for the site. Select an element and it will reveal the relevant CSS class for it.


    Mike
    Participant

    I am having no luck with horizontally spacing the menu items on mobile view. Here is the CSS I currently have in place:

    .dock-tab-wrapper.static.infodock {
    width: 100%; 
    }
    .dock-tab-wrapper.static.infodock ul {
    	float:left;
    	list-style:none;
    	margin:0;
    	padding:0;
    	text-align: center;
    	display: inline; 
    }
    .dock-tab-wrapper.static.infodock ul li {
    	display: inline-block; 
    }
    .dock-tab-wrapper.static.infodock ul li a {
    	color: #FFFFFF; 
    }
    .dock-tab-wrapper.static.infodock ul li a:hover {
    	text-decoration: bold; 
    	color: #000000; 
    }

    In a stand alone doc, this works fine. But something else is causing it to stay vertically setup, instead of horizontally. Any ideas?


    Mike
    Participant

    I gave up on using the widget custom menu and just added raw HTML in a widget. Everything is fine, except I can’t seem to get rid of this scroll bar.

    CSS:

    .mobiletopmenu {
    text-align: center;
    width:auto;
    height:auto;
    }
    a.mobiletopmenu:link, a.mobiletopmenu:visited {
    	color: #FFFFFF; 
    }
    a.mobiletopmenu:hover, a.mobiletopmenu:active {
    	color: #000000; 
    }

    HTML:
    <div class="mobiletopmenu"><strong><a href="http://none" class="mobiletopmenu">Locations</a></strong><span style="color: #ffffff;"> |</span> <strong><a href="http://none" class="mobiletopmenu">Franchising</a></strong><span style="color: #ffffff;"> |</span> <strong><a href="http://none" class="mobiletopmenu">PAP Perks</strong></a></strong></div>

    Anything you can do to help?

    Hi Mike,

    Add this CSS and that issue should be fixed:

    .infodock-innerwrap.clearfix {
        overflow-x: hidden;
    }

    Thanks!


    Mike
    Participant

    Excellent, works as stated.

    Is there a way to keep the mobile menu “sticky”, like the desktop menu?

    Hi Mike,

    Use this CSS and paste it inside Appearance > Theme Options > Custom CSS > Mobile CSS:

    nav.dock-panel-wrap.top_bar {
        position: fixed;
        top: 0;
    }
    header#header-wrap {
        margin-top: 110px;
    }

    Thanks!


    Mike
    Participant

    That worked great, but it is taking up a lot of screen real estate for mobile.

    Is there a way to minimize the header layout, like this?

    Basically, I’d want the menu icon and search left aligned, and the informational bar data right aligned, on the same horizontal level.

    If you can give me the relevant CSS classes, I am happy to figure out the placement myself. You guys have been super helpful.

    Hi Mike,

    Try to use this CSS and paste it inside Appearance > Theme Options > Custom CSS > Mobile CSS:

    .mobiletopmenu {
        text-align: right !important;
    }
    dock-panel-wrap.dock_layout_1 .dock-tab-wrapper.infodock.static {
        width: 65%;
        margin-top: 5px !important;
        float: right;
    }
    div.dock-panels.clearfix {
        padding: .3rem 0;
        width: 30%;
        float: left;
    }
    .dock-tab-wrapper.dock-menu, .dock-tab-wrapper.searchform {
        min-width: 500px;
    }

    Thanks!


    Mike
    Participant

    The snippet is working, but it is hiding the menu underneath the admin bar. I noticed the same bug on this site as well, is there no fix for this?

    Hi Mike,

    If you are referring to the mobile menu overlapping those links you added, this is a normal behavior and not a bug.

    If you want it visible even with the mobile menu displayed, use this CSS:

    
    nav.background-wrap.skinset-dockpanel.dock-menu-tabs.acoda-skin {
        margin-top: 50px;
    }

    Thanks!

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

You must be logged in to reply to this topic.