Menu icon Foundation
Columns offset? How can I position menu on screen?

Hi!

I'm still porting existing website to be resonsive.
lease take a look at the picture.
That is the way I'm trying to position menu.

Is it right way to position something in a row with offset through emty div like I did in the code below?

And the second question- I'd like the first menu item to start right from the center screen.
Is it ok if I overwrite default padding for this column?

Or may be there are better native ways to do that?

Thank you for ideas!

<header>
      <div class="row">
	    <div class="medium-6 columns">Left logo</div>
		<div class="medium-6 columns">Right phone</div>
	  </div>
	  <div class="row">
	    <div class="large-6 medium-6 columns"></div>
	    <div class="large-6 medium-6 columns">Menu comes here</div>
	  </div>
</header>
            

         

Buro 1

positiondefault properties

Hi!

I'm still porting existing website to be resonsive.
lease take a look at the picture.
That is the way I'm trying to position menu.

Is it right way to position something in a row with offset through emty div like I did in the code below?

And the second question- I'd like the first menu item to start right from the center screen.
Is it ok if I overwrite default padding for this column?

Or may be there are better native ways to do that?

Thank you for ideas!

<header>
      <div class="row">
	    <div class="medium-6 columns">Left logo</div>
		<div class="medium-6 columns">Right phone</div>
	  </div>
	  <div class="row">
	    <div class="large-6 medium-6 columns"></div>
	    <div class="large-6 medium-6 columns">Menu comes here</div>
	  </div>
</header>
            

         

Buro 1
Darek Wędrychowski over 4 years ago

I'll start with the second part of your post. One of the reasosn I chose Foundation over Bootstrap is how easy you can overwrite any setting you want without causing other default settings to break. I'd see nothing wrong with overwriting it, if we think only of the code. But as a designer, I'd say it looks more natural for me with this padding on the left. Users are used to seeing it like that on other sites.

Creating empty divs for the sake of elements positioning is never a recommended way. What's more, not all browsers will show this element if it's empty. Your design treats the top as two rows - one with logo and column, the other with empty place and menu. I'd rather think of it as two columns. In the left column there's logo, while in the right column there's phone number and below that, menu. This will let you to achieve the same thing without the empty div element, you can also place bigger logo thanks to that.

Another small thing - "medium-6" is synonymous to "large-6 medium-6". Medium-6 means that you set 6 for all screen sizes equal or larger than medium. This way your "large-6" are unnecessary, as they don't really change anything.

Mikhail Svirkin over 4 years ago

Darek, thanks for your quick reply!

I'll give it a try to use two columns within one row in header.

For structure purpose may I use nested rows/columns in there, what do you think?
Or floats would be better? Or relative positioning within these columns?

Thanks in advance!

Darek Wędrychowski over 4 years ago

I'd go with nesting. :) A row with two columns, and two rows in right column. A simple Foundation way that doesn't require additional styling.