Bootstrap Mobile SubMenu Breaking top level Chrome/Android - javascript

This is a page I'm working on currently: http://s.codepen.io/moletek/debug/QNeaXq And basically I think the sub-menu breaks when you open and close the parent item. The background will disappear, like it's closing both elements.
I've done some custom stuff, so you can view the src, but here is my standard html:
<div class="collapse navbar-collapse" id="stcs-collapse">
<ul class="nav navbar-nav">
<li class="first active"><a href="welcome" title="welcome" >Welcome</a></li>
<li class="dropdown">About
<ul class="dropdown-menu"><li class="first"><a href="about/our-vision" title="Our Vision" >Our Vision</a></li>
<li><a href="about/our-team" title="Our Team" >Our Team</a></li>
<li><a href="about/church-plants" title="" >Plants</a></li>
<li class="last">Contact Us</li>
</ul>
</li>
</ul>
</div> <!-- A summary of the menu structure with submenu
You can reproduce this in the codepen mentioned above. Or view the GIF below So basically whenever you tap the dropdown parent, it will appear fine. But if you tap the parent again, the entire background will disappear when the child items do.
I'm quite baffled! I appreciate any help.
Thanks!

Related

Removing the the drop down home menu in bar and keeping (HOME ONE) as main page of the code

I’ve recently started learning and trying to code for personal personal us and also just a new hubby. I wanted to know how to Removing the the drop down home menu in bar and keeping the (HOME ONE) as main page of the website. I’ve watched videos and searched and I followed instructions but the lay out of the bar on the website. any help would be greatly appertained. thank you in advance. here is the code and also it was a sample template i got and trying to work on.enter image description here
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item dropdown active">
Home <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li class="active">Home One</li>
<li>Home Two</li>
</ul>
</li>

Adding a navigation link to single page bootstrap website

I used a free template to create a small single paged bootstrap website now i need to add an addition navigation link(called events) to that website, but i cannot do it since the editing the html is not enough for complete change.
Therefore can you guys help me on how to add this extra navigational link.
The place I want to add the navigational link
the only place i could find related to these links index.html
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="#home" >Home</a></li>
<li><a class="menu" href="#about">about us</a></li>
<li><a class="menu" href="#service">our services </a></li>
<li><a class="menu" href="#events">Events</a></li>
<li><a class="menu" href="#team">our team</a></li>
<li><a class="menu" href="#contact"> contact us</a></li>
</ul>
</div>
</div>
apart from index.html files theres style.cs, smoothscrol.js, bootsrap.js,custom.js, mordernizer.js etc etc..
please help me to a dd a new link....
Its very easy to add a new link that scrolls to a section on the page, I would consider doing a html course because this is very basic stuff add this to your code
<li><a class="menu" href=" #YOURNEWID "> YOUR NEW LINK NAME </a></li>
So change were I've put "#YOURNEWID" to ID of the section of the page you want to scroll to for example
<div id="NEWSECTION">
<h1>This is the section I want to scroll to!</h1>
</div>
so the ID in this new section is NEWSECTION so now add NEWSECTION to where ive put #YOURNEWID
The reason why it scrolls below is that you have an id below say "#about". If you wish to give an external link to about you can give like
<li><a class="menu" href="https://www.google.co.in/">about us</a></li>
If you wish to give an internal link, Say for example to a page test.html.Create the page test.html and then do this
<li><a class="menu" href="test.html">about us</a></li>

Bootstrap : navbar parent menu selection issue

i am using bootstrap sticky menu , now for dropdown when I hover over parent menu sub menu is displayed but parent menu is not highlighted as I go one level down .
here you can see washing and cleaning comes under services .
What I want is the menu services should be highlighted as washing is at the moment this is my html structure
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About us</li>
<li>About us</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<li>Cleaning </li>
<li>Washing</li>
</ul><!-- end dropdown-menu -->
</li>
</ul>
http://www.bootply.com/j4dAggAcCh
You probably missing the :focus on your menu link. This keeps your link highlighted when your in a subnav.
So what I should try in your CSS:
.dropdown-toggle:focus{
color: red;
}

Bootstrap sidebar links are not contracting & collapsing properly

I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.

How to I let the clicked nav-pill stays active using bootstrap?

Below is how I created a menu links of my website using Bootstrap 3.1.0. I want the selected nag-pill to stay active/select while the link is clicked. Currently, the defined hover-colour is gone after the link is clicked. Is there a way to let the pill stay active after clicking?
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li>one</li>
<li><a id="menu_text">two</a></li>
<li><a id="menu_text">three</a></li>
</ul>
===Update===
I'm just new to JS and web development. The code that I'm trying to follow Twitter Bootstrap tutorial is here: http://jsfiddle.net/Dy9e6/
I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.
First you need to add default class="active" to the first element.
Second you need to add data-toggle="tab" to the <a /> element. See the docs
Your code becomes:
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li class="active">one</li>
<li>two</li>
<li>three</li>
</ul>
Demo

Categories

Resources