Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I get my logo and tagline to line up with my navigation?
    primarykey
    data
    text
    <p>I have been working on a drop down navigation which I have got close to how I like but I'm having trouble figuring out how to get the Logo (which is really just h1 text) and the tagline, to line up with my navigation. </p> <p>The html for the logo and tagline is:</p> <pre><code>&lt;div class="logo grid_5 omega"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="default.html"&gt;&lt;h1&gt;karma.&lt;/h1&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;p id="tagline"&gt;A stop motion animation&lt;/p&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>And it's corresponding CSS is this so far: </p> <pre><code>/* Header (Logo) -------------------------------------------------- */ .header.grid_12.omega { margin-top:40px; box-shadow:0 3px 10px #222; background:#FFFFFF; } .logo.grid_5.omega { float:left; } </code></pre> <p>The navigation's html is:</p> <pre><code>&lt;nav class="grid_7 omega"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="design.html"&gt;Process&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Models&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Backgrounds&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Animation&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Post-production&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="style.html"&gt;Style&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="reflection.html"&gt;Reflection&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/nav&gt; </code></pre> <p>And it's CSS is: </p> <p>/* Drop down nav ---------------------------------------- */</p> <pre><code>nav ul ul { display:none; } nav ul li:hover &gt; ul { display: block; } nav ul { background: #FFF; padding: 0 20px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #4b545f; } nav ul li:hover a { color: #fff; } nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; } </code></pre> <p>However, as you can see: it's a little off: </p> <p><a href="http://imgur.com/HDofl9a" rel="nofollow">http://imgur.com/HDofl9a</a></p>
    singulars
    1. This table or related slice is empty.
    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. 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