- This topic has 4 replies, 2 voices, and was last updated 5 months, 2 weeks ago by
.
Home › Forums › Pro Themes › Magazine Plus Pro › Mobile output with theme version 3.0 looks strange, i.e. menu, sub-menus, items
Klas Kallin.
Klas KallinHi again Psink,
Luckily, a bit late I realized that I in fact had upgraded to version 3 already in July of last year so the promlem with missing itenListElement is thereby eliminated. Sorry to have bothered you…
However, I have encountered another problem but now with theme version 3 as per the subject above.
1) I am working with two sites:
the main site: ekensberg4.se (based upon theme version 2.4) AND
the test site: wpekensist.vardagshjalp.se (based upon theme version 3.0)
If you please, ON A SMARTPHONE, take a look at these two sites you will yourself see what I mean by saying that with theme version 3 on the test site, the mobile output looks strange as far as the main menu, the submenus and the menu items are concerned (not nice). Plus that the menu icon is centered instead of aligned to the left.
On the other hand, with theme version 2.4 on the main site, the mobile output looks PERFECT.
I should mention that basically I have used the same extra CSS provided by you for theme version 2.4 when
setting up theme version 3.0.
2) Finally, again as regards theme version 3.0 it seems impossible to get a tranlation of the “Home”-string even using Loco Translation (this was very easy and straighforward in theme version 2.4).
PLEASE HELP!!!
Thank you in advance.
Kind regards
Klas
PsinkPlease Add This CSS,
html[lang=”auto”] .trail-item a[rel=”home”] span,
html[lang=”sv-SE”] .trail-item a[rel=”home”] span{
display:none;
}
html[lang=”auto”] .trail-item a[rel=”home”]:after,
html[lang=”sv-SE”] .trail-item a[rel=”home”]:after{
content: “Hem”;
}
@media only screen and (max-width: 900px){
.main-navigation .menu-toggle {
margin: 10px 10px 5px;
border: solid #fff;
}
.menu-rum {
margin-left: 0px !important;
}
#main-nav ul ul{
background-color: #0c0e1082 !important;
}
#primary-menu .sub-menu li > a {
font-size: 11px;
color: #ffffff !important;
background-color: #ffffff00 !important;
}
#primary-menu .sub-menu li.current-menu-item > a{
background-color: #1e73be !important;
}
}
Let us know if its works
Klas KallinHi,
As I have said before, you are the best!!!!!!!!!!
“Home” i now “Hem” = perfect.
Also, the mobile output for the test site with theme version 3.0 now looks MUCH MUCH better though I have a few things on my wish-list:
1) I would like to have the SEARCH FUNCTION/FIELD removed from the MOBILE output
2) Could you please state the CSS string for the ORANGE BACKGROUND COLOR of the MENU ICON BACKGROUND in the MOBILE OUTPUT. I dont like that color and would like to experiment a bit with different colors?
Thanks in advance and
KInd regards
Klas
Psink@KKNP, Add this CSS, and for the background color you can change the color code in the ‘background-color’
@media only screen and (max-width: 900px){
#main-nav .main-navigation-search{
display: none;
}
.menu-toggle:hover, .menu-toggle:focus{
background-color: #1e73be;
}
}
Klas KallinHi,
Perfect, thank you ever so much!
Happy Holidays.
Kind regards
Klas