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!
Related
The following code produces "pills" of unequal width when displayed on small or extra small screens (as defined by twitter bootstrap by default).
<header>
<div id="brand" class="container">
<div class="row">
<div class="col-sm-12">
<h1>Website</h1>
<h2>header</h2>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navs">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navs" class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</header>
The first pill seems to be exactly 2 pixels wider than the rest. I would prefer that the pills fill the entire width of the display.
Is this a bug in Bootstrap, or something I can remedy via some simple CSS?
JSFiddle: https://jsfiddle.net/elikmiller/z2og3vq7/
why don't you override bootstrap css with your custom css just add your custom class for example nav-custom and put this css into your custom css file
.nav-custom>li>a {
padding: 10px 10px;
}
fiddle
You should use another class in your html called nav-stacked. I updated your Fiddle you can see here the full example and can see here the relevant HTML part.
<ul class="nav nav-pills nav-stacked nav-justified">
<li class="active">
This one is 2px wider
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
ever since I entered the code for a dropdown menu, scrollspy only hovers over the work items in the drop-down. It does not apply to the other a elements. I'm pretty sure I have the right data target. Thoughts? (I've tried referencing the code on the bootstrap documentation, w3, and another person's site. I must be missing something.)
<body data-spy="scroll" data-target=".navbar">
<div class="container-fluid">
<nav class="navbar navbar-inverse, navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="home navbar-brand">
Home
</div><!-- end home -->
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
"Work"
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
</ul>
</li>
<li>FAQ</li>
<li>Contact
</li>
</ul>
</div><!-- nav -->
</div><!-- / nav container -->
</nav><!-- / navbar -->
This is probably too late for the original poster - but in case anybody else comes across this, the problem was probably because the target divs (or etc elements) of the dropdown links were hidden. According to Bootstrap's official documentation for ScrollSpy:
"Non-:visible target elements ignored
Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted."
(http://getbootstrap.com/javascript/#scrollspy)
This means if your dropdown link targets are invisible (i.e. hidden), the SpyScroll plugin won't work on them.
A workaround would be to add some hidden menus to the dropdown with the href id of some other empty elements just above and below your desired section. It may not be clear to understand my point, if anyone needs further clarification, please let me know and I'll be happy to elaborate :-)
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
My navbar-brand goes down when I resize my browser or either I use it on my low resolution mobile device.
Here's my jsfiddle
My NavBar Code:
<div class="navbar navbar-default" id="page">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="img/feueac-logo.png" style="position:absolute; width:30px; height:35px; top:7px; left:5px;" /><span style="padding-left:25px; padding-top:0px;" class="navbar-brand" >FEU - EAC E - Project System</span></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Client Application</li>
<li>About Us</li>
<li>Contact Us</li>
<li class="dropdown">
Login <b class="caret"></b>
<ul class="dropdown-menu">
<li id="modal_trigger" href="#modal" class="btn_red">Faculty</li>
<li id="modal_trigger2" href="#modal2" class="btn_red">Student</li>
<li class="divider"></li>
<li id="modal_trigger3" href="#modal3" class="btn_red">Guest</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<p style="padding-left:20px; padding-top:4px;">
<input type="text" class="form-control col-lg-8" placeholder="Search" style="width:300px; height:30px;">
</form>
</div>
</div>
Here's some examples:
Good:
Bad:
Worse:
I've had luck using FitText, a jQuery plugin that fits text to it's parent element.
From their website:
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Not exactly an "answer" (which there may be none of for this question), but a decent solution.
Good luck!
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;
}