Hi again
The site is live and I’m wondering how I get the mobile version to show the mobile menu button on the left, and my image as a mobile menu item.
If you visit the site, I want the image you see in the menu when scrolling at the same place when you’re scrolling on mobile.
I’m displaying the logo in the menu with the following css, and it’s working great on everything except mobile:
/* —————————————————————————-
Custom CSS
*/
.menu-item-40484 {
display: none;
}
.affix .menu-item-40484 {
display: block;
}
.menu-item-40484 {
position: absolute; left: 260px;}
}
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
.menu-item-40484 {position: absolute;left: 35px;}
}
/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1199px) {
.menu-item-40484 {position: absolute;left: 52px;}
}
@media (min-width: 1019px) and (max-width: 1199px) {
.td-menu-wrap #td-top-menu {
padding-left: 70px;
}
I’ve tried adding something like the css below, but it doesn’t work:
/* responsive phone */
@media (max-width: 767px) {
.menu-item-40484 {position: absolute;left: 5px;}
}
My site: http://www.amerikanskpolitikk.no
hi,
Emil G is answering you on email, no need to write here too.
Thanks for you message.
Radu A.
Hi again
Everything looks great in Chrome (38), but how do I write IE11 specific CSS? The logo in the menu looks all messed up in IE11…
/* —————————————————————————-
Custom CSS
*/
.menu-item-40484 {
display: none;
}
.affix .menu-item-40484 {
display: block;
}
.menu-item-40484 {
position: absolute; left: 260px;}
}
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
.menu-item-40484 {position: absolute;left: 35px;}
}
/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1199px) {
.menu-item-40484 {position: absolute;left: 52px;}
}
@media (min-width: 1019px) and (max-width: 1199px) {
.td-menu-wrap #td-top-menu {
padding-left: 70px;
}
When scrolling, the logo in the menu looks like this in Chrome (38):
<!– copy and paste. Modify height and width if desired. –> 
and it looks like this in IE11…..:
<!– copy and paste. Modify height and width if desired. –> 
Hi,
Please use this media query to target IE 10 and above and apply your style:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
After I have inspected your site I found that setting the logo img at 300px fixes this, you could use this ccs:
.affix .menu-item-40484 img {
width: 300px;
}
Hope this helps.
Thanks
Ok, but how do I center it/move it right or left? See the difference in Chrome and IE11?
Hi,
Use position and set the menu item a element to right: 118px, like this: http://screencast.com/t/VfBEzavyu5Q
.affix .menu-item-40484 a {
right: 118px;
}
Hope this helps!
Thanks
Thanks Lucian!!
