Swap burger menu on iPad portrait for standard navigation

[sadrobotsmile]

Hi there. I recently posted the below comment on the ThemeForest forum, but was asked to post the question here:

“This and your Cardinal theme are my ‘go-to’ shopping themes – I absolutely love them. I have one minor query though that I hope you can help with – I want the normal desktop menu (main-navigation) to display on my iPad. The iPad currently displays the mobile burger menu which I don’t want, despite me selecting ‘Display Mobile Header on Tablet Landscape (< 1024px)’ set to OFF in the admin. No matter what I try via CSS I can’t seem to fathom it out! Please could you help as to how I can switch the full menu on the mobile version? Thank you.”

– However I have just noticed that the 1024 option relates to the landscape version – which does work correctly – sorry.

I still would like the full menu to appear on the portrait version – is there some CSS I can use to toggle this?

Hope you can help.

Thanks.

Robert

[David Martin – Support]

Hi Robert,

Please add this to your Theme Options => Custom CSS:

@media only screen and (max-width: 979px) {
#logo a.hidden-desktop.show-main-nav {
    display: none!important;
}
.header-4 #main-navigation {
    margin-right: 0;
}
#main-navigation {
    display: block!important;
    position: static!important;
    float: none;
}
#main-navigation {
    margin-left: -10px;
    position: relative!important;;
}
.header-right > nav {
    float: right!important;;
    margin-right: -10px;
    margin-left: 20px;
}
#main-navigation ul.menu > li {
    border-bottom: none;
    float: none;
    display: inline-block;
    width: auto;
}
#logo {
    margin: 10px 20px 5px;
    float: left!important;
    width: auto;
    max-width: 228px;
}
#logo a.mobile-search-link {
    display: none!important;
}
.header-4 .header-right {
    float: right;
    width: inherit;
}
#main-navigation ul li.parent > a:after {
display: none;
}
}

Thanks.

[sadrobotsmile]

Hi David

Many thanks for looking into this and spending the time in finding a solution. We’re pretty much there! The menu looks great on an ipad now. Only odd thing is on the drop-down menu for the ‘brands’. When it’s clicked, the menu opens inline with the rest of the menu (so it pushes the page down, instead of floating over the site). See image attached.
Is this easily remedied?
Hope you can help, and thanks again!

Robert

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 979px) {
li.menu-item-12655{
top:175px !important;
}
}

Thanks
Mohammad

[sadrobotsmile]

Hello

Oh dear! That didn’t seem right at all! It’s dropped the menu item considerably lower than the main menu. (see attached) I think it’s the drop-down/submenu that is the problem – probably needs a absolute position or somethng?

Thanks, as always for your support.

Robert

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Have resolved it with this amended:

@media only screen and (min-width: 720px) {
.mobile-search-link {
display:none;
}
}
@media only screen and (max-width: 979px) {
#logo a.hidden-desktop.show-main-nav {
    display: none!important;
}
.header-4 #main-navigation {
    margin-right: 0;
}
#main-navigation {
    display: block!important;
    position: static!important;
    float: none;
}
#main-navigation {
    margin-left: -10px;
    position: relative!important;;
}

.header-right > nav {
    float: right!important;;
    margin-right: -10px;
    margin-left: 20px;
}
#main-navigation ul.menu > li {
    border-bottom: none;
    float: none;
    width: auto;
display: inline-block;
padding-right:8px;
padding-left:8px;
}
#logo {
    margin: 10px 20px 5px;
    float: left!important;
    width: auto;
    max-width: 228px;
}
#logo a.mobile-search-link {
    display: none!important;
}
.header-4 .header-right {
    float: right;
    width: inherit;
}
#main-navigation ul li.parent > a:after {
display: none;
}

#main-navigation ul.menu > li:first-child {
    border-top: 0 !important;
}
#main-navigation ul.menu > li {
overflow: visible;
}
#main-navigation ul.menu > li > ul {
    margin-top: 10px;
    margin-bottom: 20px;
    position: absolute;
    z-index: 9995;
    margin: 0;
    top: 30px!important;
    left: 0;
    display: none;
    min-width: 150px;
    -moz-box-shadow: 0 0 5px -1px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 0 5px -1px rgba(0,0,0,.2);
    box-shadow: 0 0 5px -1px rgba(0,0,0,.2);
   background-color: #fff!important;
}
}

[sadrobotsmile]

Absolutely superb! That sorted it! Thank you so much for taking the time on this. It’s really appreciated!

Thank you!

[David Martin – Support]

Happy to help you out!

– David.