CSS - Bootstrap Menu - html

I am using Bootstrap with Hyde CSS and I am having difficult doing the following:
Where the icon (image) is in the menu, I want to display the text right next to it, but I can't seem to figure out how to do with using the
<ul>
<li></li>
</ul>
Here is what I currently have:
<ul class="nav navbar-nav">
<li class="home2">
<a href="/">
<img class="first" src="/images/home-icon.png">
Home
</a>
</li>
</ul>
Which is producing the following:
Any ideas?

I guess that the comment made by Aeolingamenfel is right. I made a sample in jsfiddle where you can see the display in action.
JSFiddle Sample
<style>
.homeWrong > a > img{
display: block;
}
.homeRight > a > img{
display: inline;
}
</style>
<ul class="nav navbar-nav">
<li class="homeWrong">
<a href="/">
<img class="first" src="/images/home-icon.png">
Home
</a>
</li>
<li class="homeRight">
<a href="/">
<img class="first" src="/images/home-icon.png">
Home
</a>
</li>
</ul>

I have a solution. Just use this css below:
.home2 img{
display:inline-block;
vertical-align:middle; //You can use the exact amount like ..px;
}

Related

Menu is underneath content of page (z-index)

I am working on a clients website on Shopify and for some reason the dropdown menu seems to go underneath the product display and filter. I have tried changing the z-index but have had no luck.
Would anyone know what the issue might be? Here is a link to the page having trouble: https://livingtextiles.com/collections/test-collection
<header id="header" style="background-color:#fff!important;">
<div class="header-top pbf-header-top">
<div class="container pbf-container">
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="logo">
<img src="https://cdn.shopify.com/s/files/1/1568/4679/files/wholesale-logo.png?16165857088723477752">
</div>
<nav class="menu-top">
<ul>
<li class="level-1 dropdown">
<a class="dropdown-toggle a1 pbf-ws-text" data-toggle="dropdown" title="Living Textile Brands" style="color:#0c3056!important;font-size: 23px;padding-right:20px;">SHOP BY BRANDS</a>
<ul class="menu-level2 dropdown-menu pbf-column">
<div>
<li class="level2"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/living-textile-ws-logo.png?15789627674492600681"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/lolli-living-ws-logo.png?11306798353806545224"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/poppi-living-ws-logo.png?11306798353806545224"></li>
</div></ul>
<li class="level-1 dropdown">
Collections
<ul class="menu-level2 dropdown-menu">
/*** CSS ***/
#header {
display: block;
float: left;
width: 100%;
}
set position:relative and z-index:99 to the #header, this will fix your problem
#header {
position:relative;
z-index:99;
}

Tree structure in html [duplicate]

This question already has answers here:
HTML tree full width hover effect
(3 answers)
Closed 6 years ago.
I need to create a tree structure using html and css.
Structure should be like this.
Current css and html for this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
li.active{
background: #B7E9FB!important;
}
<ul>
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.1</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.2</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.3</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.4</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder active">
<a href="javascript:void(0);">
<span>TEST1.5</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.6</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
This structure can have n number of nodes.
Problem:
nested elements width is less than root element width because of left padding (applied padding to display hierarchy), so on hover background color changes only for that particular width.
I want to make width of all li element to 100% of root element so on active background color will change for 100% width of display area, but need to maintain hierarchy.
I would like to have css solution for it.
Thanks in advance.
You can change your CSS like this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
ul li a{
display:block;
}
li.active a{
background: #B7E9FB!important;
}

How to get elements of an internal class element?

I am working on making a collapsible element
I want to access
<div id="class1">
<ul>
<li> <a href="#" >link 1</a></li>
<li> <a href="#" >link 2</a></li>
<ul class="submenu">
<li> <a href="#" >link 1-1</a></li>
<li> <a href="#" >link 1-2</a></li>
</ul>
</ul>
I want to change the color of linki 1-1 when the link 2 is active or hide it when the link 2 is inactive.
Hope I am being clear here.
Just created a rough mockup for achieving the desired result. Please note there are many ways of achieving and this is only a way
$("#drop").click(function() {
$(".item").toggle("active")
})
.active {
display: block;
}
.item {
display: none
}
.item a {
text-decoration:none;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="class1">
<ul>
<li> link 1
</li>
<li> link 2
<ul class="submenu">
<li class="item"> link 1-1
</li>
<li> link 1-2
</li>
</ul>
</li>
</ul>

How to float div up?

I have a menu and a submenu in different divs. There is a space between them. How can I make them look like a one whole menu? I used bootstrap navbar for main menu and simple nav for submenu. I'm very newbie in css. this is what I have:
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Website Logo</a>
<ul class="nav">
<li class="active">DashBoard</li>
<li>Docs</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account<b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 250px;">
<li>Dashboard</li>
<li>LogOut</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul class="nav nav-pills">
<li class="active">
Stats
</li>
<li>Api Calls</li>
<li>Settings</li>
</ul>
</div>
jsfiddle
I just want to remove the space between them.
And one more little question:
how can I get rid of a little caret between button and it's dropdown? (white triangle between Account nav item and it's dropdown)
Your first question can be answered by removing the default margin-bottom for the class navbar:
.navbar {
margin-bottom:0
}
Now, for your second question. There is a triangle created using borders on your dropdown-menu. You can disable this with this css:
.navbar .nav > li > .dropdown-menu:after {
border:none;
}
Add the following CSS to remove the margins:
.navbar{
margin:0px;
}
JS Fiddle: http://jsfiddle.net/eszf7/3/

Bootstrap centering navbar

I'm new to bootstrap and am having a bit of trouble positioning a fluid dropdown menu. I would like to have it in the center or my page and have tried a few things, but it's not quite right.
I have tried to add a class of span6 and then add float: none; margin: 0 auto; to the css, and this does center it, but when the responsive menu kicks in it's somewhere between the middle instead of the left side. This also messes with the menu items.
I have also tried placing text-align:center; in various places to see if that would do anything, but it doesn't seem to effect anything.
Any help would be wonderful!
Here is my html
<div class="container-fluid">
<div class="row-fluid">
<div class="span12" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
set margin-left:auto; margin-right:auto on ul with class nav
In Bootstrap.css line: 3102 edit
.nav > li > a {
/* display: block; */
}
Edit the bootstrap.css file line: 3638 to 3651 as shown:
.navbar .nav {
position: relative;
left: 0;
display: block;
/* float: left;
*/ margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav > li {
/* float: left; */
}
For the following HTML works. It displays the menu center aligned.
<html>
<head>
<link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
<style>
.navbar-inner {
text-align: center !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 navbar-inner" >
<div class="navbar ">
<div class="container-fluid">
<a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
<div class="nav-collapse collapse navbar-responsive-collapse unique1">
<ul class="nav">
<li><?=anchor('/frontpage', 'Who we are');?></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
<li> Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li> Separated link
</li>
<li> One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>