Need help with nav section | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 3

Need help with nav section

Anyone have a basic code setup for a nav section that keeps it horizontal? Everything I put keeps setting up vertically.

20th Feb 2018, 4:45 PM
Felix Viruet
Felix Viruet - avatar
8 Answers
20th Feb 2018, 4:55 PM
Mazin Ayash
Mazin Ayash - avatar
+ 2
Do you mind posting your code so I can take a look at it? I can tell you why it's not displaying as you intend. It's better to know what's going on and how to resolve than simply posting code for you to copy/paste.
20th Feb 2018, 4:54 PM
Fata1 Err0r
Fata1 Err0r - avatar
+ 2
Please, give us link to your code! Typically we put an unordered lists (<ul>) in the nav. To list the elements (<li>) horizontally, you need to make them as inline-block elements. CSS: li { display: inline-block; } Something like that: https://code.sololearn.com/WQAgAnRymYHR/?ref=app
20th Feb 2018, 5:14 PM
Boris Batinkov
Boris Batinkov - avatar
+ 1
<!DOCTYPE html> <html lang="en"> <!--Start of Head--> <head> <meta charset="utf-8" /> <meta content="width=device-width" name="viewport" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="We Work Wonders" name="description" /> <meta content="We Work Wonders, hair salon, beauty parlor, kids, haircut" name="keywords" /> <meta content="Felix Viruet" name="author" /> <meta content="noindex, no follow" name="robots" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="www.css" rel="stylesheet" type="text/css" /> <title>We Work Wonders</title> <!--[if 1t IE 9]> <script src="http://html5shimgooglecode.com/svn/trunk/html5.js"> </script> <![endif]--> </head> <!--End of Head--> <!--Start of Body--> <body data-gr-c-s-loaded="true"> <div class="wrapper"> <header class="header"> <p class="logo"><a href="https://cooltext.com"><img src="https://images.cooltext.com/5101407.png" width="700" height="100" alt="We Work Wonders" /></a> <br />Image by <a href="https://cooltext.com">Cool Text: Logo and Button Generator</a> - <a href="https://cooltext.com/Edit-Logo?LogoID=2765186864">Create Your Own Logo</a> </header> <nav class="nav"> <ul> <li><a href="home.html">Home</a></li> <li><a href="services.html">Services/Prices</a></li> <li><a href="contact.html">Contact Us</a></li> <li class="more"><a class="morebtn" href="javascript:void(0)">More</a> <div class="more-content" style="left: 546px; top: 408px"> <a href="book.html">Book Online</a> <a href="portfolio.html">Portfolio</a> <a href="about.html">About</a> </div> </li> </ul> </nav>
20th Feb 2018, 6:02 PM
Felix Viruet
Felix Viruet - avatar
+ 1
@Felix, do you have the code in the playground? If yes, then open it, click on the 3 dots in the top right corner, click on copy to clipboard, then paste it in a comment here. And then we'll see a link to your code. Pasting code here is ugly and no readable.
20th Feb 2018, 6:16 PM
Boris Batinkov
Boris Batinkov - avatar
0
<article class="container"> <section class="content"> <h2>Mission</h2> <p><em>T</em>his website design is for my girls. I have 7 daughters and a wonderful wife.</p> <p><em>N</em>ow they are at the age where a regular wash is just not enough so as a joke my wife came up with the name "We Work Wonders."</p> <p><em>E</em>ach one of my daughters has a different hair style, feel and texture and likes their hair in a different hair style.</p> <p><em>S</em>o my wife turned our bathroom into her office where she transforms sometimes a mess to something that looks decent.</p> <p><em>T</em>rust me after 11 years now she is pretty good at what she does.</p> <p><em>S</em>o gives us a call if you every need a little help when you are having a bad hair day.</p> <br /> <p class="motto">If Your Hairs a Mess, We Do Our Best to Make It Look Decent!!!</p> <h2>Mission Statement</h2> <p class="mission">Our mission is to provide your hair with makeover. Aren't you tired of waking up with bed-hair or just after along day running around town taking care of business and your hair just looks a mess. Well we here at <i><b>"<em>W</em>e <em>W</em>ork <em>W</em>onders"</b></i> will take on any bad hair style and make it and you look decent.</p> <!--End of Body--> </section> </article> <!--Start of Footer--> <footer class="footer" > <a href=""> <img src="images/valid_html5-yellow.gif" alt="Valid HTML 5" width: 85px; height: 30px; /></a> Copyright (c) 2018 All Rights Reserved. Designed by Felix Viruet.<a class="copyright" href="mailto:[email protected]">Email Me</a><a href="http://jigsaw.w3.org/css-validator/check/referer"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" width: 85px; height: 30px /></a> </footer> <!--End of Footer--> </div> </body> </html>
20th Feb 2018, 6:02 PM
Felix Viruet
Felix Viruet - avatar
0
I had to post it in 2 different posts, another thing my footer is so big I will like it to be very simple and smaller at the bottom of the page. But as for the NAV, it is showing horizontal now but the words are stacked on top of each other and need to be spread out. Will you also need to see the CSS file?
20th Feb 2018, 6:05 PM
Felix Viruet
Felix Viruet - avatar
0
Yes I just added and made it public name (nav).
22nd Feb 2018, 4:50 PM
Felix Viruet
Felix Viruet - avatar