Menu wrap on iPad, Sticky menu on mobile, Get the app button on mobile

[FASupport]

1) The primary menu wraps to a second line on iPad. It also happens on desktop when window is resized smaller. A screen shot is displayed showing full window without the menu wrap and resized window with the menu wrap. When window is resized to the point that the mobile menu displays, the page is fine. There is plenty of empty space to the right of the menu. How can the menu wrap be stopped?

2) The sticky menu does not appear on mobile devices when scrolling down a page with long text. Works fine on desktop. What is needed to display the sticky menu on mobile devices?

3) The “Get the App” button does not display when the mobile menu appears. What is needed to display the “Get the App” button on the left side of the mobile menu?

The following Custom CSS is currently contained in the Theme Options:

/* Removes border on “Get The App” button (BP) */
.button.get-app {
border: none;
}

/* Change color of menu indicator from teal to grey */
#primary-menu .hover-bg, #primary-menu > ul.menu > li:hover > ul.sub-menu{
border-color: #4D4F51;
}

/* Logo displays on left side for mobile screens */
@media only screen and (max-width: 479px) {
#site-logo a {
float: left;
}
}

/* Eliminate white space above header, Change mobile menu color */
@media only screen and (max-width: 767px) {
#header > .inner > .wrap {
padding-top: 5px;
}
#site-logo a{
margin-top: -35px;
}
#mobile-menu-toggle {
border: 2px solid #4D4F51;
color: #4D4F51;
}
}

I will include ftp access information in a private post. Thanks!

[FASupport]

This reply has been marked as private.

[Veena]

Pls try the below custom CSS in themeoptions –

#primary-menu {
    float: right;
    margin-right: 230px;
}
@media only screen and (max-width: 1024px){
#primary-menu {
   float: right;
   margin-right: 230px;
}}
@media only screen and (min-width:768px) and (max-width: 1024px){
#site-logo, #header .button.get-app{
    top: 60px;
}}
@media only screen and (max-width: 767px){
#header .button.get-app {
    position: relative;
    display: inline-block !important;
    top: 15px;
}
#header {
    padding-bottom: 60px;
}
#header.sticky {
    display: block;
}
#header.sticky #primary-menu {
    display: none !important;
}}

[Author]

Posts