Hi,
I added a flag for switching to different languages in my navigation bar using vantage.
After doing this, the navigation bar gets bigger but only the hover effect of the language button gets bigger. The other navigation entries remain as small as before. So now, there is a border above the other entries which is grey as the rest of the navigation bar but does not get highlighted when hovering over it.
Here is all of my edited css, maybe the problem is there or do I need to add some other css?
/* Enter Your Custom CSS Here */
.entry-content img { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important }
.entry-meta{
display: none;
}
.entry-utility{
display: none;
}
.panel-grid-cell .panel {
margin-bottom: 5px !important;
margin-left: -10px !important;
margin-right: -10px !important;
}
.post { margin-top: -35px !important; margin-bottom: 0px !important;}
/*
.main-navigation ul li a {
padding: 15px 40px;
}
.page-id-406 .full-container{
padding: 0px 0px !important;
}
*/
body.responsive header#masthead hgroup { text-align: center; }
body.responsive header#masthead hgroup .logo { float: none; }
body.responsive header#masthead hgroup .logo img { margin: 0 auto; }
body.responsive header#masthead hgroup .support-text,
body.responsive header#masthead hgroup #header-sidebar {
display: block;
margin-top: 0px;
max-width: 100%;
position: static;
}
.main-navigation ul {
text-align: center !important;
}
header#masthead {
padding: 0 !important;
}
.main-navigation ul li {
display: inline-block !important;
float: none !important;
}
header#masthead.masthead-logo-in-menu .logo > img {
max-height: none !important;
}
And in the following links are screenshots of the problem because I am not allowed to post a link to the page.
http://image-upload.de/image/zcMV9X/1be87e61d8.png
http://image-upload.de/image/z9ueUR/54a5600e02.png
Thanks!
Hi Steven
It’s a bit fast and loose but would you like to check out the child theme I posted here?
https://siteorigin.com/thread/google-language-translator-on-primary-nav-menu-bar/
Scroll down and you’ll see I link to a child theme download link. You can try installing it from Appearance > Themes > Add New: Upload Theme. It’s normal for a new theme, even a child theme, to reset your Customizer and menu settings.
That child theme introduces a widget area that is in the menu, I created it for this type of request.
Thanks Andrew for your reply!
I found another solution just through adding the image with the following code:
<div style="background-image: url('/DE-flag.png'); background-repeat: no-repeat; display: inline; margin: 0; padding: 8px 16px 16px 16px;"> </div>Hi Steven
That’s 100% as long as you added that div via a child theme. Also are you sure your background url works on all pages? I think that should perhaps be an absolute url. What happens when your url is say /about/ for example?
The CSS/padding side of this is unfortunately something I’d need to see live to help with.
Hi Andrew,
I shortened the url so not everyone can see my website. Of course you are right! I use an absolute url.
What do you mean with adding that div via a child theme? I have no child theme installed. I only use a custom css plugin to change something in the theme.
Ok nice one.
Where did you insert that div?
In the field “display as” in the custom menu.
Ahh right. Yeah that’ll work. To go back to my previous comment, I’d really need to view this live to assist with the padding challenge.
Thanks, but everything works fine as I mentioned above.
Thanks anyway for the good support! :)
Super, let us know if you run into further challenges. All the best.