Moving the header menu next to the logo

[Namika88]

Good evening all,

i wonder if you can help me?

i have been playing around trying to move my header menu (directly under the logo, i'll post the link in a minute).

I can get the menu to move but when i do, it goes completely out of context (goes vertically and various colours instead of running horizontally like it is now!) I have obviously kept a copy of the original code whilst i play about with it and have put it back to the original state.

 

I have pasted the code at this link: https://paste.ofcode.org/NtQgR7FRaQ74nVdrFVy5uz

the web address is: http://www.myfuturewebsite.co.uk

 

Any suggestions would be greatly appreciated.

 

Thanks in advance.

 

Adrian

[requinix]

What about the Request a Quote button? Do you want to do logo + menu + button + phone number at the same level?

[Namika88]

Yes, sorry i should have mentioned that.

Thank you for the quick reply.

 

Whilst trying to move stuff, i did manage to get the request a quote button alongside the phone number, but it was on the wrong side :/, it ended up on the right hand side instead of the left! LOL

[requinix]

You want it on the left? Seems a bit weird. Shouldn't it be by the phone number since they're both about contacting the company?

 

Anyway, that whole header kinda needs a redo. I mean, why are the menu items marked as .color-N? Why are there so many overlapping elements? Using ULs for presentation?

 

Start with logical, semantic markup. Here's what I would try first:

<header>
	<a class="logo" href="...">
		<img src="...">
	</a>
	<nav>
		<ul>
			...
		</ul>
	</nav>
	<a class="request-quote" href="...">...</a>
	<div class="phone">
		<p>Call Us Today</p>
		<a href="...">...</a>
	</div>
</header>

Using whatever CSS tooling is available, you'd

- Have the header use a flexible layout so the menu can stretch.

- Position the logo (header .logo) on the left with a minimum width and whatever height you want. Maybe fixed dimensions.

- Show the menu (header nav) in horizontal order with a maximum (whatever is available) width.

- Position the quote button (header .request-quote) on the right with a minimum width.

- Position the phone number (header .phone) group on the right with a minimum width, and its children (header .phone > *) as block elements. Phone icon is probably a background image, so the container gets a bit of padding-left to make space for it.

 

For responsiveness... well, it also depends on your tooling. With a Bootstrap-style approach you might move a couple of those header children around so that you could have the logo+quote+phone as one row and push the menu to a second row. If you want the menu as one of those three dots/bars things in a corner then that would be something else.

 

PS: Was the PNG logo converted from a JPEG? It has artifacts. Should clean that up.

[Namika88]

Thank you for your reply.
The quote button should indeed be on the right hand side, what i should have said is that it ends up on the right hand side of the phone number, instead of on the left hand side of the phone number,

So i'd like it to be: icon >> nav menu >> request a quote button >> Phone number.

 

I will give what you have suggested a go and find a work around to make it responsive.

Thank you again for your swift reply.

[requinix]

If the position is the only problem you have then I'm guessing you're using floats, so try swapping the two elements in the markup.