f.lindenberg

Hi ibiselgreco,

I’m using POedit to customize the string translations. I was able to translate the new strings and upload the updated .po and .mo files. Give it a try!

Hi codeinwp,

thanks for your answer. I’m looking forward to the next update.

For now, I’ve copied front-page.php into my child theme and replaced placeholder="Your Name" with placeholder="<?php echo __('Your Name','zerif-lite');?>".

Then, I was able to translate this string. I did the same with the other strings.

Please consider to adopt this for your next update.

Cheers,
Fabian

Hi Drew,

I’ve tried following your suggestion, but haven’t had any success, yet.

This is the part I’ve copied from the media query (max-width: 767px). I created my own media query (min-width: 768px) and (max-width: 991px) and pasted it there.

/* HEADER */
	.bs-navbar-collapse {
		border: 0;
	}
	#main-nav {
		overflow: visible;
	}
	#main-nav,
	#main-nav.fixed {
		position: relative;
	}
	.navbar-inverse .navbar-nav {
		padding-left: 10px;
		line-height: normal;
		text-align: center;
	}
	.navbar-inverse .navbar-nav>li {
		display: inline-block;
		margin-bottom: 0;
	}
	.navbar-inverse .navbar-nav > li {
		width: 100%;
		border-bottom: 1px solid #EDEDED;
		position: relative;
		margin: 8px 0 0 0;
		padding: 0 0 8px 0;
	}
	.navbar-inverse .navbar-nav > li  a {
		text-align: left;
	}
	.navbar-inverse .navbar-nav ul.sub-menu {
		display: none !important;
		position: relative;
		top: 0;
		box-shadow: none;
		width: 100%;
	}
	.navbar-inverse .navbar-nav li.this-open > ul {
		display: block !important;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li {
		width: 100%;
		float: left;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li a {
		width: 100%;
		float: left;
		padding: 8px 25px 8px 0;
		border-bottom: 1px solid #EDEDED;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li:last-child a {
		border-bottom: none;
	}
	.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu {
		position: relative;
		left: 0;
		top: 0;
	}
	#main-nav {
		overflow: hidden;
	}
	#main-nav,
	#main-nav.fixed {
		position: relative;
	}
	.navbar-collapse {
		max-height: 100%;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li {
		padding-left: 20px;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li {
		padding-bottom: 0;
		padding-top: 0;
	}
	.dropdownmenu {
		display: block;
		position: absolute;
		z-index: 9;
		right: 0;
		top: 5px;
		width: 25px;
		height: 25px;
		margin: 0;
		padding: 0;
		border-radius: 3px;
		background: url(images/menu-icon.png) center center no-repeat #e96656;
	}
	.navbar-inverse .navbar-nav ul.sub-menu li{
		margin-right: 0;
		padding-right: 0;
	}
	.navbar-inverse .navbar-nav > li > a:hover {
		color: #404040 !important;
	}
	.this-open > a {
		color: #e96656 !important;
	}

The regular menu is indeed replaced. However, the toggle button is not being displayed and instead the menu items are shown as if I had already clicked on the toggle button and expanded the menu. Also there are some additional, minor differences.

Do you have any ideas what I did wrong? Did I miss something while copying? Is my media query overwritten by something else?

Any tip is welcome ??

Thanks, Drew, for your prompt reply.

Unfortunately, the site is running locally so I cannot provide you with a link.

So, let me check if I understand you correctly:
I would write my own media query for sizes > 768px and < 990px. In this query, I’d copy paste all the css rules that relate to the burger menu and that you are using in your existing media query for < 768px?

This approach seems to be a hassle to maintain in future, doesn’t it? Suppose you change the burger menu in an upcoming update, I’d have to remember to copy & paste the new rules into my own media query, again. Right?

Or maybe I’ve misunderstood you in the first place ??

Thanks, looking forward to your answer.