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

Viewing 4 posts - 16 through 19 (of 19 total)
  • Author
    Posts

  • Mike
    Participant

    I have tried this, and it does not appear to be working. Here is a full list of all the CSS changes we have made to the dock/info bar & mobile menu area:

    Desktop (located in style.css in my child theme):

    /* Dock Wrapper */
    .dock-tab-wrapper.dock-menu ul.dock_menu .events-menu ul ul {
    	margin-left:0;
    }
    div.mobiletopmenu  {
    	text-align:  center;
    	width:  100%;
    	padding:  0px;
    	margin:  0px;
    	color:  #FFFFFF;
    	font-size:  15px;
    	font-weight:  bold;
    	top:  -10px;
    }
    a.mobiletopmenu:link,  a.mobiletopmenu:visited  {
    	color:  #FFFFFF;
    	font-size:  16px;
    	font-weight:  600;
    }
    a.mobiletopmenu:hover,  a.mobiletopmenu:active  {
    	font-size:  16px;
    	font-weight:  600;
    	text-decoration:  underline;
    }
    .intro-wrap-inner.row  {
    	display:  none;
    }
    .mobiletopmenu  {
    	padding:  0 0 0 0;
    }
    .dock_layout_1 .dock-tab-wrapper.infodock.static  {
    	padding:  .3rem 0 !important;
    }
    .dock-panel-wrap .dock-panels  {
    	padding:  .3rem 0;
    }

    Mobile CSS (located in Theme “Mobile Custom CSS in Customize tab):

    nav.dock-panel-wrap.top_bar  {
         position:  fixed;
         top:  0;
         height:  100px;
    }
     header#header-wrap  {
         margin-top:  110px;
     }
     .infodock-innerwrap.clearfix  {
         overflow-x:  hidden;
     }
     .dock-tab.socicons  {
         display:  none;
     }
    
     div.mobiletopmenu  {
         text-align:  center;
         width: 100%;
         background-color:  #FFFFFF;
         padding:  0px;
         margin:  0px;
         color:  #000000;
         font-size:  14px;
         font-weight:  bold;
         top:  -10px;
     }
     a.mobiletopmenu:link,  a.mobiletopmenu:visited  {
        color: #000000;
         font-size:  14px;
         font-weight:  bold;
     }
     a.mobiletopmenu:hover,  a.mobiletopmenu:active  {
         font-size:  14px;
         font-weight:  bold;
         text-decoration:  underline;
     }
    nav.background-wrap.skinset-dockpanel.dock-menu-tabs.acoda-skin  {
        margin-top:  50px;
    }

    And here a screenshot of the admin bar overlapping the mobile view:

    On a related note, is there a way to minimize how much empty space the logo is taking up?

    I totally misunderstood (misread) your last concern as I thought you were referring to the Menu covering the header links you added.

    Regarding your concern, I am not seeing the issue from my end. I tested this on multiple browsers and also used Chrome Dev Tools to simulate multiple mobile devices and the WP Admin Bar is not covering the header/menu at all.

    To decrease the ‘white space” on the logo, it’s a combination of decreasing the logo margin, then decreasing the header’s top margin using CSS.

    Something like: (Place this inside Mobile CSS)

    header#header-wrap {
        margin-top: 80px;
    }
    
    header#header-wrap {
        margin: 0.875rem 0;
    }

    Thanks!


    Quetrends
    Participant

    Hi there,

    Is there a simple to add the icons i want to the dock bar or it only via css?

    Hi @justjollof

    You can add social Icons via Theme Options > Social Media. Just provide the URLs to your Social Media on their designated boxes then check the box to display them.

    If the social icon you want is not listed, custom CSS can be added to display it. FontAwesome fonts are used in the social media icons for the theme.

    Regards,

Viewing 4 posts - 16 through 19 (of 19 total)

You must be logged in to reply to this topic.