So, I have this menu:
What can I do to the menu fill horizontally the entire page? Am I using the wrong bootstrap classes? It just fills a part of the page. Can someone teach me what to do here?
ul {
list-style-type: none;
border-bottom-style: solid;
border-bottom-color: green;
position: relative;
}
li {
display: inline;
padding: 30px;
}
#menu a {
color: black;
}
#menu a:hover {
color: green;
font-weight: 700;
text-decoration: none;
border-bottom-style: solid;
border-bottom-color: green;
border-bottom-width: 6px;
border-radius: 4px;
}
<body>
<section>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid wrapper">
<div class="navbar-header">
<ul id="menu">
<div class="row">
<div class="col-md-12">
<li><img src="Imagens/Logo.png"></li>
<li id="menu1">About us</li>
<li> Act</li>
<li> News</li>
<li> Videos</li>
<li> Contact us</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</section>
</body>
Im not an expert at bootstrap and I don't know for what the class is used to do but if I remove the div-element: <div class="navbar-header"></div> it worked in my Chromium.
With Chromes Developer Tools you are able to find bugs like this
(Ctrl+Shift+I or Ctrl+Shift+C to use the Element Inspector directly)
Maybe you could add style="text-align: justify"; on the wrapping div around your <li> tags to set the spaces between the menu entry's dynamically.
Hope it would help you.
You can set the width of navbar-header to 100% with the below code to make the varbar cover the full length horizontally however it's not going to perfect functional navbar.
.navbar-header{
width:100%
}
The reason being, it does look like this is possibly a Bootstrap 3 navbar that you're trying to use with bootstrap 4 which is why it's not working. The classes are different between BS3 and BS4.
Check http://getbootstrap.com/docs/4.0/examples/navbars/ for examples for how to implement a bootstrap 4 navbar.
Related
I'm very new to web development. I feel confident in my knowledge in HTML and CSS to start building my webpage and I was exposed to a very small amount of bootstrap. My question is regarding a personal webpage I am building for myself. I want to have a navigation bar on the top that will link to different pages such as: "Home", "about me", "Projects". But I still have a hard time understanding how to position them where I want. My idea is to make these 3 fields a list, take out the list styling, and then make these elements inline-block. But for some reason, my code does not translate to what I want which is all 3 phrases on a single line and spaced out evenly. Further, even if I can manage that how can I control where it goes beside floating left or right or using bootstrap? Even though it may be less efficient can anyone explain to me the naive way of hardcoding it with just HTML and CSS just so I have an understanding? Do I have to manipulate the margins and padding through trial and error? Any advice would be appreciated, I have just begun to learn HTML and CSS but I am determined to get good at web development.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First WebPage</title>
<link rel="stylesheet" type="text/css" href = "style.css">
</head>
<body>
<div class = "top-border">
<ul class = "navbar">
<li>Home </li> <br>
<li>About Me </li> <br>
<li>Projects </li>
</ul>
</div>
</body>
</html>
My CSS is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-border {
width: auto;
height: 100px;
background-color: #D46A6A;
}
.navbar{
float:left;
display: inline-block;
list-style: none;
margin-left: 20px;
}
Using <br> tag is not proper way for layout implementation, Please omit them, I proffer using flex, the flex-box methods are very simple and useful. see below code:
.navbar {
display: flex;
flex-direction: row;
}
For more styles, use your past CSS.
to make your menu single line, remove <br> from your list and set li to float: left
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top-border {
width: auto;
height: 100px;
background-color: #D46A6A;
}
.navbar {
float: left;
display: inline-block;
list-style: none;
margin-left: 20px;
}
.navbar li {
float: left;
border-right: 1px solid yellow;
padding: 2px 5px
}
<div class="top-border">
<ul class="navbar">
<li>Home </li>
<li>About Me </li>
<li>Projects </li>
</ul>
</div>
Not using bootstrap here, as you have mentioned in your question
<div class="top-border">
<div class="navbar">
<a class="links" href="you can add your page links here" > Home </a>
<a class="links" href="#" > About </a>
<a class="links" href="#" > Project </a>
</div>
</div>
<style>
.top-border{
width:100%;
height:auto;
position:absolute; #or use float if you don't want a fixed navbar
top:0; #add as per requirement
left:0;
}
.navbar{
height:100px;
width:800px;
margin-left:auto;
margin-right:auto;
}
.links{
float:left;
height: 50px;
width: 100px;
padding-top: 25px;
padding-bottom : 25px;
text-align: center;
text-decoration: none;
}
</style>
Also, don't forget to make the body margin 0.
I found that w3css (https://www.w3schools.com/w3css/) was easier than Bootstrap, had enough structure to produce the types of layouts you describe, AND has the added bonus of having a really small code footprint. Standard CSS only (No jQuery or JavaScript library).
Each feature links to a 'Tryit' editor. This link shows the layout you describe with two cells.
(https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_container)
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Just add one more cell block, and you're there.
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<!--HERE-->
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Hope this helps, good luck!
I have a default bootstrap navbar, and I want some header right below that navbar.
Any help would be appreciated.
Here's how they did it on the linked site..
<div id="sub-header" class="green-header">
<div class="inner-wrap clearfix">
<h1>A Community Where Golfers Share, Discover and Discuss All Things Golf</h1>
<ul>
<li>Join the Community</li>
<li>or Sign in</li>
</ul>
</div>
</div>
Css...
#sub-header {
background: #2c3036 none repeat scroll 0 0;
color: #d9d9da;
}
.green-header {
background: #277f6d url("/assets/images/green_sub_bg.png") repeat-x scroll left top !important;
color: #eaf6f4 !important;
}
* {
box-sizing: border-box;
}
*::-moz-placeholder {
color: #ccc;
}
body {
color: #444;
font: 100%/1.5 "Open Sans",Helvetica,Arial,sans-serif;
}
Is there a reason this structure doesn't work? It's what your reference site is doing.
<div id="header">
<!-- navigation markup here -->
</div>
<div id="sub-header">
<!-- sub header markup here -->
</div>
All you really need to do is place a block level element after your navigation container element. Basic markup really.
I am using the skeleton framework and am trying make a simple nave bar?
When I try and create a nav-bar div and set the css nav- bar id colour to blue the background won't change. However if i try and change the individual columns the colour will change. Is there a way will a grid framework to create a consistent nav bar on top with out telling each column to be a certain colour. this seems silly.
Also is it possible to have a nav bar that extends past the frameworks 960px length? I would like to have the bar background extend to both sides of the screen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="skeleton.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
</head>
<div class="container">
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar--->
</div><!---container--->
</html>
CSS:
.container {
margin-top: 50px;
}
#nav-bar {
background-color: blue;
}
#nav {
margin: 13px 0 0 0;
}
#nav ul li {
display: inline;
margin: 0 20px 0 0;
margin-bottom: 130px;
}
#nav a {
text-decoration: none;
color: black
}
#nav a:hover {
text-decoration: underline;
}
https://jsfiddle.net/gp9d7yvz/
the #nav children is floating left that make #nav has no height.
Let append <div style="clear:both"></div> before the closing tag of #nav to make it have height like this fiddle.
https://jsfiddle.net/gp9d7yvz/2/
There is an error on the third line of your CSS code : there is no closing } tag. This causes the following CSS to malfunction. You also forgot to put the closing ";" at the end of your "color:black;" property. If it doesn't work also add a fiddle please.
First question:
Try adding background-color under #nav not under #nav-bar
#nav {
margin: 13px 0 0 0;
background-color: blue;
}
Second question:
All your content is inside a .container with a width of 960px. You cannot get these div's to be 100% in width when they are inside this container. So what you need to is to change your code by moving the header outside of the container.
<div id="nav-bar">
<div class="two columns">
<h1>DS</h1>
</div>
<div id="nav" class="ten columns">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div><!---nav-bar-->
<div class="container">
</div><!---container-->
Here is an example:
https://jsfiddle.net/gp9d7yvz/5/
When using grid 960, can I still have a 100% width header section?
I have a bootstrap navbar and I want to underline the links on hover. The issue is that the underline (using border-bottom) is sitting directly under the li element and I want to attach it to the bottom of the grandparent div [the nav in the below example].
Additionally, I want to limit the width of this underline to the width of the text itself, not the entire element it's underlining.
<nav>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand header-title" href="#/home">Title!</a>
</div>
<div class="header-links">
<ul class="nav navbar-nav my-nav" role="menu">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
</div>
</div>
</nav>
.my-nav > li:hover {
border-bottom: 0.2em solid white;
}
See jsfiddle for full example, http://jsfiddle.net/8kzpjeyv/1/embedded/result/ (make sure your viewport is wide enough so menu isn't collapsed)
Want to make the underline at the very bottom of the blue bar so it looks like it's part of the white body
Want to limit the width of the underline to the exact width of the text
You may use padding-bottom:
.my-nav > li:hover {
padding-bottom: .2em;
border-bottom: 0.2em solid white;
}
demo
http://jsfiddle.net/8kzpjeyv/3/
.my-nav a{
padding-left:0!important;
padding-right:0!important
}
If you could kindly hover your mouse over the MORE button in the menu here: http://jsfiddle.net/H8FVE/7/
You will see that there is a list containing the words Random text here. I tried to style that list but somehow the styling of the drop down menu prevents me from doing it. The style I used for the list is:
#trendcontainer {
margin-top: 0px;
padding-bottom: 1px;
}
#trend { width: 188px; }
#trend ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#trend film
{
display: block;
padding: 3px;
width: 188px;
background-color: #B40404;
border-bottom: 1px solid #eee;
text-align: center;
letter-spacing: 0.4px;
color: #FAFAFA;
}
Here is part of the HTML:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
<morecontainer>
<moreleftbar>
<trendcontainer>
<trend>
<ul>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
</ul>
</trend>
</trendcontainer>
</moreleftbar>
</morecontainer>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/7/
Can you figure out how to fix the styling? If you choose to answer, please be detailed as my coding knowledge is limited - ideally with an updated fiddle.
I just updated it. http://jsfiddle.net/H8FVE/11/
I added a class called .random in the css code and class="random" into the ul element you aimed to modify.
in the css I added the following code, although you may change it to fill your purposes. (if you want to style only the ul, change it to .random { }
.random li {
font-weight:bold;
}