To simplify this as much as possible, i am basically adding a bootstrap navbar to a page, one of the tabs has a dropdown menu which has a choice of 5 sub options. I have found that the background is only showing to the bottom of the first sub option. The CSS sets the height to 100% which is what i would like, if i change the CSS to say 500px; it will expand the area.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a class="active" href="index.html">Home</a></li>
<li><a class="li" href="whatido.html">What I Do</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Travels<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Asia</li>
<li>Europe</li>
<li>Scotland</li>
<li>Other</li>
<li>And Another</li>
</ul>
</li>
<li><a class="li" href="upcomingtrips.html">Upcoming Trips</a></li>
<li><a class="li"href="aboutme.html">About Me</a></li>
<li><a class="li" href="gallery.html">Gallery</a></li>
<li><a class="li" href="contactpage.html">Contact</a></li>
</ul>
</div>
</div></nav>
</nav>
the css for the dropdown is simple
.dropdown-menu {
height:100%;
}
the result :
adjustable size
however if i change the css to
.dropdown-menu {
height:300px;
}
i get this result
fixed size
Im struggling to understand why the 100% option doesn't cover the entire area when each sub option is included in the 'dropdown-menu' ul class?
In bootstrap for .dropdown-menu class position: absolute; is there. So height in percentage wont work. If remove the position: absolute; from dropdown class the percentage of height is working.
Related
I've got this bit of code here: (Update: I put the entire navbar code here now because I realized with the limited amount originally posted may be limiting the ability to figure out the problem)
<nav class="navbar navbar-inverse navsize">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition col-lg-2">#Html.ActionLink("Home", "Index", "Home")</li>
<li class="dropdown individualbtnposition">
Our Company<span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Our History", "Index", "OurCompany")</li>
<li>#Html.ActionLink("Facilities", "Facilities", "OurCompany")</li>
</ul>
</li>
<li class="dropdown individualbtnposition">
Employee Services<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
Forms
<ul class="dropdown-menu">
<li>#Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</li>
<li>#Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</li>
<li>#Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</li>
<li>#Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</li>
<li>#Html.ActionLink("Payroll Forms", "PayrollForms", "FormsHandlers")</li>
</ul>
</li>
<li>Pay Stubs</li>
<li>#Html.ActionLink("FAQ", "FAQ", "FormsHandlers")</li>
</ul>
</li>
<li class="dropdown individualbtnposition">
Support Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>IT Support</li>
<li>#Html.ActionLink("Purchasing Ticket", "OnlineForms", "FormsHandlers", new {id = "purchasing-services-form" })</li>
<li>Maint. Support</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="logout col-lg-1">
<a asp-area="" asp-controller="Home" asp-action="Logout">Sign Out</a>
</div>
On the class="dropdown-toggle", when a menu button is clicked, it changes the square around it to black. I don't want it to change color, but I can't seem to figure out how to keep it from doing it. The only thing I could figure out was if I put this code in:
.dropdown-toggle{ background: white; }
Then it changes the background white before clicking it. So I can effect the color before clicking, but after clicking I can't seem to get it to just not be changed at all. Any ideas? Here is a picture of what it is doing for a reference:
I was able to use the dev tools to narrow it down to exactly what was putting the black there, then I just manually changed it. here is the piece of css that I put in to fix it:
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
color: #fff;
background-color: initial;
}
When you view the page as mobile the main navigation bar does not show the drop downs properly underneath their respected parent link. I have search and cannot seem to find a solution. Currently the dropdown menus show under and to the left of the main link. You can see a live demonstration at http://beta.lofbc.org
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-lg hidden-md hidden-sm" href="#">Life of Faith Bible Church</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav nav-justified">
<li>#Html.ActionLink("HOME", "index", "Home")</li>
<li role="presentation" class="dropdown">
ABOUT US <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Church Services", "ChurchServices", "About")</li>
<li>#Html.ActionLink("What to Expect", "WhatToExpect", "About")</li>
<li>#Html.ActionLink("What we Believe", "whatwebelieve", "About")</li>
<li>#Html.ActionLink("Leadership", "Leadership", "About")</li>
</ul>
</li>
<li role="presentation" class="dropdown">
MINISTRIES <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Children", "Children", "Ministries")</li>
<li>FAA</li>
<li>God's Girlz Club</li>
<li>AfterShock Youth</li>
<li>Young Adults</li>
<li>Men of Impact</li>
<li>Women</li>
<li>God's Golden Girls</li>
<li>The Great Giveaway</li>
</ul>
</li>
<li>#Html.ActionLink("EVENTS", "", "Events")</li>
<li role="presentation" class="dropdown">
MEDIA <span class="caret"></span>
<ul class="dropdown-menu">
<li>Live Stream</li>
<li>#Html.ActionLink("Service Archives", "ServiceArchives", "Media")</li>
<li>TV Broadcast</li>
<li>Photo Album</li>
</ul>
</li>
<li>STORE</li>
<li role="presentation" class="dropdown">
CONTACT <span class="caret"></span>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Send us a Message", "index", "contactus") </li>
<li>Submit Testimony</li>
<li>Prayer Request</li>
<li>#Html.ActionLink("Give", "Donate", "Giving")</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
This is happening because your nested <ul> tags are absolutely positioned. An absolutely positioned element cannot move relatively positioned elements so even if you moved it across it will simply appear on top of your existing buttons.
My fix would be to apply the following css to the nested <ul> tags:
#media (max-width: 767px) {
.nav-justified>.dropdown .dropdown-menu {
position: relative;
width: 100%;
background-color: #1c5168;
}
.nav-justified>.dropdown .dropdown-menu li {
color: lightblue;
text-align: center;
}
}
Placing it inside a media query will stop the css from applying to your menu on desktop layouts.
You will still have to add more styling to get the menu to look nice but this will fix your positioning issue.
Just for reference here is a good article about the position property with examples of how it works: https://css-tricks.com/almanac/properties/p/position/
Here i am trying to generate full width responsive submenu for service li in my menu but i am not able to generate the full width responsive submenu.A example of full width submenu i am trying to generate is this.
And my current submenu for service by my code is show as :
Below is my code
<div class="main-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<h1><img class="img-responsive" src="images/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
<li class="scroll dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Service <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="scroll">About Us</li>
<li class="scroll">Portfolio</li>
<li class="scroll">Team</li>
<li class="scroll">Blog</li>
<li class="scroll">Contact</li>
</ul>
</div>
</div>
</div>
Any help will be highly appreciated
I would have a look at it, but I'd need to see the CSS. I found the free template, but the it doesn't have a dropdown menu. So if I could see your CSS, I could get back to you and see what I can do! :)
~ Daniel
Ps I couldn't comment, rep is less than 50.
You can find full-width responsive menus here:
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
scroll down to see more.
You must use some framework, in this case it's bootstrap.
if you want to keep your code, provide us full-codesnippet or a jsfiddle link, otherwise seem that you want us to create all css/js over your html (and some people will offend and downvote your answer).
Hope it helps!
My Bootstrap navbar links including search goes away whenever I resize the page anywhere less than about 600px. What would be the cause of this? Only the logo does not move. The navbar is fine and does not resize, so I was surprised that the links went away when the page resize. I do not want any of my links to move from where they are regardless of page resizing.
code is here: HTML
http://jsfiddle.net/Crisp3333/2u0tgh5r/
<div class="menubar">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="yancii_logo.jpg" width="40px" height="50px">
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search events, places, contacts......" class="form-control">
</div>
</form>
<ul class="nav navbar-nav">
<li>CreateEvent</li>
<li>MyEvents</li>
<li>Contacts</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Account</li>
</ul>
</div>
</nav>
The problem is this piece of code: /* min-width: 1400px; */
And you can find it in your class -> .navbar
It basically causes your drop-down menu not to show. And the menu buttons don't resize along as you want them to.
Hope this helps you out!
Cheers
I'm trying to work on coding a website using the Bootstrap development kit. I've set up the navigation bar with a couple of links but I'm having some trouble with some custom links I've added. I added CSS to the bootstrap.min.css file titled 'navbar-social', which will be used to house social media icons for the navigation bar.
I added the images just fine and they display great. The problem I'm having is when I add a link to them they go out of line and hovering over them gives them a background box which I do not want.
I've attached some screenshots and the code used, I cannot for the life of me work out where the background box is coming from, because checking the a styles doesn't seem to have anything there. I'm new to CSS so I apologise if I'm missing something obvious.
None linked: http://prntscr.com/2ob9mj
LinkedIn not linked, rest linked: http://prntscr.com/2ob2b2
CSS code added to bootstrap.min.css. Rest is as it comes:
.navbar-social{
float:right !important;
padding:5px;
font-size:18px;
line-height:37px;
height:20px
}
HTML: (a href removed in this case)
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">REMOVED</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li class="dropdown">
Programming <b class="caret"></b>
<ul class="dropdown-menu">
<li>Java</li>
<li>C++</li>
<li>Actionscript 3.0</li>
</ul>
</li>
<li>Web Design</li>
</ul>
<ul class="nav pull-right">
<li class="navbar-social"><img src="images/linkedin.png" alt="LinkedIn" /></li>
<li class="navbar-social"><img src="images/github.png" alt="GitHub" /></li>
<li class="navbar-social"><img src="images/twitter.png" alt="Twitter" /></li>
<li class="navbar-social"><img src="images/facebook.png" alt="Facebook" /></li>
</ul>
</div>
</div>
</nav>
Thanks all!
Bootstrap adds styling to the child a elements. You could simply overwrite it using the following:
WORKING EXAMPLE HERE
.nav .navbar-social > a {
padding:0;
}
.nav>li>a:hover, .nav>li>a:focus {
background-color: transparent;
}