Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are quite a few things that we need to look at here, I will list them one by one.</p> <ol> <li>The contents are currently displayed as <code>table-cell</code> with the <code>left-links</code>, <code>logo</code> and <code>right-links</code> as 3 cells (each having a unique <code>width</code>). Hence, it is not possible to achieve the expected structure without modifying the HTML also.</li> <li>First move the entire <code>div</code> with class as <code>left-links</code> to be outside the <code>div</code> with class as <code>large-12 columns header-container</code>. Change the CSS <code>display</code> property for <code>left-links</code> to be <code>table-row</code> (consider that the same as what a <code>&lt;tr&gt;</code> tag would do).</li> <li>Change the <code>display</code> for <code>#masthead .header-container</code> also to be <code>table-row</code> and <code>height</code> to 75%. So effectively the <code>logo</code> and <code>right-links</code> are part of the first row in the table and <code>left-links</code> is part of the second row.</li> <li>Change the <code>width</code> for the <code>logo</code> to be 100% so that it takes the entire width and gets centered.</li> <li>Finally remove <code>float</code> for <code>ul.header-nav li</code> and set the <code>display</code> for <code>#masthead .left-links &gt; ul</code> as <code>table-cell</code>.</li> </ol> <p><strong>Note:</strong> This is more a hacky solution than an optimal one. But this keeps the changes to the mark-up as minimal as possible.</p> <p><strong>Note 2:</strong> The position of the drop-down menus are getting affected a bit due to all these changes. I will update the answer once I have a solution for that also.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload