VonDriguen

Dears,

I am trying to split a navigation menu in 2 parts and to center all the items in both part. In other words, find below the expected result:

But, It does not work  I got this result:

Can you please help me? This is my HTML code:

<div class="w3-margin-top">
	<div class="w3-bar w3-light-grey w3-border w3-card-4">
		<div class="w3-half w3-center">
			<a href="#" class="w3-bar-item w3-button"><img src="images/logo-test.png" alt="logo"/></a>
		</div>
		<div class="w3-half w3-center w3-cell-middle">
			<a href="#" class="w3-bar-item w3-button">Link 1</a>
			<a href="#" class="w3-bar-item w3-button">Link 2</a>
			<a href="#" class="w3-bar-item w3-button">Link 3</a>
		</div>
	</div>
</div>

Many thanks in advance for your help!!!

Dear all,

I try to make a responsive header with an image on the left and a text on the right. But they never have the same size and I would like to avoid using px size in the style to be sure that is will stay responsive.

Example code:

<header>
	<div class="w3-row">
		
		<div class="w3-quarter w3-border">
			<img src="images/logo.png" alt="logo">
		</div>

		<div class="w3-rest w3-grey">
			<p class="w3-padding">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>

Result:

I though that it may be because the image is bigger than the text so I have tried to following:

<header>
	<div class="w3-row">
		
		<div class="w3-quarter w3-border">
			<img src="images/logo.png" alt="logo">
		</div>
		
		<div class="w3-rest w3-grey">
			<p class="w3-padding w3-xlarge">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>

Result:

How may I correct this? By example, is this possible to set a height size in % and center the image on the height of the container?

Many thanks in advance for your help!!!