Desktop Versus iPad V Mobile Header

[Martin]

Martin

October 16, 2016 at 7:31 am

Hi All,

I am really struggling with this one, I am using virtue premium and I am trying to get a desktop and mobile layout for the header area to work for a particular client.

I have a demo site on asbreport.co.uk. and on the desktop this renders perfectly, however on the iPad landscape the menu drops one item down (contact us) and in addition on the top bar I seem to get BOTH the top bar menu and also the three line menu icon dropped down one line.

I currently have the following css on the site.

#topbar .kad-topbar-right {
width: 50%;
float: left;
}
#topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
float: right;
/* width: 50%; */
}

div.textwidget {
padding-top: 5px;
}

@media (min-width: 992px) {
.col-md-12.kad-header-right {
width: 50%;
float: right;
margin-top: -75px;
margin-right: -20px;
padding-right: 0;
}
.kad-header-widget h2 {
padding-top: 20px;
text-align: right !important;
}
}

blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: “201C””201D””2018″”2019″;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}

.page-header {
display: none;
}

@media all {
h4, h5, h6 {
margin-top: 18px;
margin-bottom: 10px;
}
}

@media all {
[class*=”wp-image”] {
display: inline;
}
}

I can provide a login if required.

Can you help me to get to a point where the iPad view is the same as the desktop view?