How can I get my nav and h1 on the same line?, Navigation bar |
How can I get my nav and h1 on the same line?, Navigation bar |
youknowmeneedhelp3times |
Jun 11 2018, 01:03 AM
Post
#1
|
Group: Members Posts: 1 Joined: 11-June 18 Member No.: 26,657 |
Sorry, I could use some advice, I am having a difficult time getting the nav on the same line as my h1. I am using boot strap and col-sm-8 and col-sm-4 but I cant get them on the same line.
<!doctype html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <meta charset="utf-8"> <link href="RoyalPetmotel.css" rel="stylesheet" type="text/css"> <!--added below--> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title> Royal Pet Motel </title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <header class="container"> <div class = "row"> <h1 class="col-sm-4">Royal Pet Motel</h1> <nav class= "col-sm-8 text-right"> <ol> <li>About</li> <li>Map</li> <li>Boarding</li> <li>Grooming</li> </ol </nav> </div> </header> <section class="jumbotron"> <div class ="container"> <div class ="row text-center"> <h2>25 Years of Service</h2> <h3>Premier boarding and Grooming</h3> <a class="btn" "bnt-primary" href="#" role= "button">Learn more</a> </div> </div> <section class="container"> <div class = "row"> <p> </p> <figure class="col-sm-6"> <p> Grooming </p> <img src="dog.jpg"/> </figure> <figure class ="col-sm-6"> <p> Boarding Dogs </p> <img src="#"/> </figure> </div> <div class = "row"> <figure class= "col-sm-6"> <p> Cats Boarding</p> <img src="#"/> </figure> <figure class ="col-sm-6"> <p> Cats Grooming</p> <img src="#"/> </figure> </div> </section> </section> <section class ="container"> <div class ="row"> <p class ="col-sm-4"> © 2018 Royal Pet Motel </p> <ul class ="col-sm-4"> <li class ="col-sm-2"></li> <li class ="col-sm-2"></li> </ul> </div> </section> </body> </html> |
pandy |
Jun 11 2018, 06:05 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Is RoyalPetmotel.css in any way relevant? If so we need to see that too. A link to the online page is preferable, if possible. Otherwise post the CSS here.
|
Lo-Fi Version | Time is now: 25th April 2024 - 10:24 PM |