How do I make the ul responsive with boostrap5 inside the div? - html

Hello I'm trying to make my code responsive I'm making a solitaire game, and I need to make it responsive, this is my codefor the HTML:
<body>
<div id="tablero" class="container mt-3">
<div class="row">
<ul class="contenedorColumnas list-group list-group-horizontal">
<li class="contenedorCartas1 list-group-item">
<ul id="columna1" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas2 list-group-item">
<ul id="columna2" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas3 list-group-item">
<ul id="columna3" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas4 list-group-item">
<ul id="columna4" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas5 list-group-item">
<ul id="columna5" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas6 list-group-item">
<ul id="columna6" class="columDisplay list-group" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
<li class="contenedorCartas7 list-group-item">
<ul id="columna7" class="columDisplay list-group list-group-horizontal" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</li>
</ul>
<div id="mazos" class="col-sm">
<div id="mazo_Entrada"></div>
<div id="almacen"></div>
<div id="almacen2"></div>
<div id="almacen3"></div>
<div id="almacen4"></div>
</div>
</div>
</div>
<script src="js/solitario.js"></script>
And for some reasson when I open the html nothing is responsive, and even worts everything looks messsy


Did you import bootstrap css into your html?
try to add this in your header
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

Related

Synchronize multiple nav-tabs with multiple nav-bars in Boostrap 4

I'm building a tool to help some co-workers examine and compare information.
I want this information to be shown in the same manner for each order is shown and since there are a lot of "groups" of information for each order I have built nav-tabs to switch between each information group.
I would however like the nav tab selector-bar for all selectors to be updated, not just the one the user clicked.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA1' class='tab-pane fade in active TabA'>
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='TabB1' class='tab-pane fade TabB'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='TabC1' class='tab-pane fade TabC'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA2' class='tab-pane fade in active TabA'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='TabB2' class='tab-pane fade TabB'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='TabC2' class='tab-pane fade TabC'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>
So if you click on any of the selector bar "buttons" the info tab for both changes correctly, but the selector of the one I didn't click won't change. Is there any way to solve this?

You need to change your href value and the tab in each class. Difficult to explain: check my solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA1'>Tab A</a> <!--CHANGE HREF-->
</li>
<li><a data-toggle='tab' href='.TabB1'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC1'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA1' class='tab-pane fade in active TabA1'> <!--PUT SAME VALUE AS IN HREF-->
<div class='row'>aaaaaaaa11111111111</div>
</div>
<div id='TabB1' class='tab-pane fade TabB1'>
<div class='row'>bbbbbbb11111111</div>
</div>
<div id='TabC1' class='tab-pane fade TabC1'>
<div class='row'>cccccccccc1111111</div>
</div>
</div>
<p> </p>
<p> </p>
<div class='col-md-12'>
<div class='row'>
<div class='col-md-12' style='margin-top: -50px;'>
<ul class='nav nav-pills'>
<li class='active'><a data-toggle='tab' href='.TabA2'>Tab A</a>
</li>
<li><a data-toggle='tab' href='.TabB2'>Tab B</a>
</li>
<li><a data-toggle='tab' href='.TabC2'>Tab C</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id='TabA2' class='tab-pane fade in active TabA2'>
<div class='row'>aaaaaaaa22222222</div>
</div>
<div id='TabB2' class='tab-pane fade TabB2'>
<div class='row'>bbbbbbb222222222</div>
</div>
<div id='TabC2' class='tab-pane fade TabC2'>
<div class='row'>cccccccccc2222222</div>
</div>
</div>
</div>

image not looking good in firefox as it looks in chrome

I am having the problem which is the image on my chrome is looking perfectly fine as it is shown in the screenshot given below but in firefox it is not looking fine as it looks like in chrome
This is how it looks in Firefox.
And this is how it looks in Chrome.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->
<div class="desti-tab-row col col-sm-12 no-padding">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active safetyandsecurity" data-toggle="tab"
href="#safetyandsecurity">SAFETY AND SECURITY
</a></li>
<li class="nav-item"><a class="nav-link comfortandconvenience" data-toggle="tab"
href="#comfortandconvenience">COMFORT AND CONVENIENCE
</a></li>
<li class="nav-item"><a class="nav-link environmental" data-toggle="tab" href="#environmental">ENVIRONMENTAL</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="safetyandsecurity">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">SAFETY AND SECURITY</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="sec_cam"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-cam.png">
<span>24HR CCTV MONITORING</span>
</li>
<li class="list-item"><img class="cctv"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/cctv.png">
<span>CCTV CONTROL ROOM</span>
</li>
<li class="list-item"><img class="sec_personnel"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sec-personnel.png">
<span>SECURITY PERSONNEL ON-DUTY AROUND THE CLOCK</span>
</li>
<li class="list-item"><img class="entry_exit"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/entry_exit.png">
<span>ENTRY AND EXIT CONTROLLED BY ACCESS CARD SYSTEM</span>
</li>
<li class="list-item"><img class="heigtened_rail"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heightened-railings.png">
<span>HEIGHTENED RAILINGS</span>
</li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="window_opening"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/windows-opening.png">
<span>RESTRICTED WINDOW OPENING SPACE</span>
</li>
<li class="list-item"><img class="fire_doors"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-dors.png">
<span>FIRE RATED DOORS</span>
</li>
<li class="list-item"><img class="fire_access"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-access.png">
<span>FIRE RATED ACCESS CONTROL PANELS</span>
</li>
<li class="list-item"><img class="fire_furniture"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/fire-furniitiure.png">
<span>FIRE RATED FURNITURE</span></li>
<li class="list-item"><img class="wifi"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/wifi.png">
<span>SECURE ISOLATED NETWORKS FOR WI-FI AND CCTV</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="comfortandconvenience">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">COMFORT AND CONVENIENCE</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="male_female"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/male_female.png">
<span>DEDICATED BLOCKS FOR MALE AND FEMALE RESIDENTS</span>
</li>
<li class="list-item"><img class="sound"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sound.png">
<span>NOISE REDUCING WALLS AND DOORS (STC RATED)</span>
</li>
<li class="list-item"><img class="room"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/room.png">
<span>DEDICATED ACCESS POINTS FOR EACH ROOM</span>
</li>
<li class="list-item"><img class="internet"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/internet.png">
<span>HIGH SPEED INTERNET</span>
<li class="list-item"><img class="sweeper"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sweeper.png">
<span>FULL-TIME SANITARY AND HOUSEKEEPING SERVICES</span></li>
</div>
<div class="col-sm-6">
</li>
<li class="list-item"><img class="digital_notice"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/digital_notice.png">
<span>DIGITAL NOTICE BOARDS ACROSS THE PROPERTY</span>
</li>
<li class="list-item"><img class="residence"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/residence.png">
<span>ON-SITE
RESIDENT SUPPORT – COMMUNITY MANAGEMENT</span>
</li>
<li class="list-item"><img class="water_proof"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/waterproof.png">
<span>WATERPROOF, ANTIFUNGAL AND ANTIBACTERIAL COMFORT SPRING MATTRESSES</span>
</li>
<li class="list-item"><img class="myriad_app"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/myriad_app.png">
<span>THE MYRIAD APP – TO CENTRALISE ADMINISTRATION AND SERVICES SUCH AS BOOKINGS,
PAYMENTS AND NOTICES</span>
</li>
<li class="list-item"><img class="phone"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/phone.png">
<span>IN-ROOM PHONES</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane container fade" id="environmental">
<div class="row">
<div class="content-info col col-sm-6 no-l-padding">
<h3 class="red-title">ENVIRONMENTAL</h3>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul>
<li class="list-item"><img class="heat"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">
<span>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</span>
</li>
<li class="list-item"><img class="air_window"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png">
<span>DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT</span>
</li>
<li class="list-item"><img class="low_energy"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png">
<span>LOW ENERGY CONSUMING HEAT PUMPS</span></li>
</div>
<div class="col-sm-6">
<li class="list-item"><img class="solar_panel"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png">
<span>SOLAR PANELS SPACE</span>
</li>
<li class="list-item"><img class="sensor"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png">
<span>OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN - ROOM AND THROUGHOUT
COMMON AREAS</span>
</li>
<li class="list-item"><img class="shower"
src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png">
<span>WATER CONSERVING SHOWERHEADS</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- Tab end row -->
</div>
CSS
.list-item {
margin-bottom: 20px;
}
.list-item img {
margin-right: 10px;
}
li.list-item {
display: flex;
margin-bottom: 25px;
align-items: center;
}
li img {
margin-right: 21px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
How can i correct the images in Firefox?

You can use css grid for this.
li.list-item {
display: grid;
align-items: center;
grid-template-columns: min-content 1fr;
}
demo

How can I add a submenu to the sidenav in Materialize?

How can I add submenu to the following sidenav?
<ul class="sidenav sidenav-fixed" id="nav-mobile" style="width:250px">
<li> Text here</li>
<li>
<div class="divider"></div>
</li>
<li>
<a onclick="load('home')"><i class="material-icons">home</i>Home</a>
</li>
<li><a onclick="load('intro')"><i class="material-icons">apps</i>Content Table</a></li>
</ul>

MaterializeCSS documentation site uses a collapsible inside the sidenav:
https://materializecss.com/collapsible.html
Collapsible is a separate component that also needs initialising:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
Working codepen:
https://codepen.io/doughballs/pen/RwPWVqy
The actual markup taken from the Materialize doc site is:
<!-- Start nested content -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal" tabindex="0"><i class="material-icons">menu</i>Nested</a>
<div class="collapsible-body">
<ul>
<li>Color</li>
<li>Grid</li>
<li>Helpers</li>
<li>Media</li>
<li>Pulse</li>
<li>Sass</li>
<li>Shadow</li>
<li>Table</li>
<li>Transitions</li>
<li>Typography</li>
</ul>
</div>
</li>
</ul>
</li>

You can do something like below with MaterializeCSS
<div id="slide-out" class="sidenav" style="transform: translateX(0%);">
<ul class="collapsible">
<li class="active">
<div class="collapsible-header">
Group1
</div> <div class="collapsible-body" style="display: block;">
<li>Course 1</li>
<li>Course 2</li>
</div>
</li>
<li class="">
<div class="collapsible-header">
केंद्रीय लोकसेवा आयोग
</div>
<div class="collapsible-body" style="">
</div>
</li>
</ul>
</div>

Logo and Navbar links on same line

I'm trying to get the logo and the nav bar links on the same line. The logo will appear by itself when it resizes to mobile.
This is the current:
Currently on two lines.
This is the html behind it:
<!-- header Area Start-->
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-12">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-10 text-right col-md-9 col-12">
<div class="responsive_menu"></div>
<div class="mainmenu-area">
<ul id="nav">
<li>Home <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Rocket Home </li>
<li>Gradient Home </li>
</ul>
</li>
<li>Domain</li>
<li>Hosting <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Hosting </li>
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
</ul>
</li>
<li>Pages <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
<li>Service</li>
<li>Blog Details</li>
<li>404 Page</li>
<li>Coming Soon</li>
</ul>
</li>
<li>Blog</li>
<li>Support</li>
</ul>
</div>
<div class="search">
<span class="search-trigger"><i class="fa fa-search"></i></span>
<div class="search-box">
<form action="#">
<input type="text" name="s" placeholder="Search..">
<div class="submit-btn">
<input type="submit" value="Go">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- header Area end-->
Any suggestions on what I can do to make them all on one line?

Maximum size of the column in bootstrap is 12. Bootstrap adds padding and margin by default, so try using col-lg-8 and see what happens.
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-8 text-right col-md-9">
<div class="responsive_menu"></div>
<div class="mainmenu-area">

How to remove unwanted line breaks in html/css

Working on a Django templates with a theme bought on themeforest. The problem I'm having is that, whenever I use base template, the header automatically adds line breaks to the top but when using hardcoded template files, it seems fine.the white space at the top is an example of what im talking about I'd be glad if anyone could help me on how to remove this unwanted space.
Here's the code of the header base template:
{% load static %}
<div id="mainMenuBarAnchor"></div>
<header class="white_header">
<nav class="navbar navbar-default bootsnav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="attr-nav">
<div class="upper-column info-box first">
<div class="icons"><i class="icon-telephone114"></i></div>
<ul>
<li><strong>Phone Number</strong></li>
<li>+1 900 234 567 - 68</li>
</ul>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index6.html"><img src="{% static 'images/logo.png' %}" class="logo" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right" data-in="fadeIn" data-out="fadeOut">
<li class="dropdown active">
Home
<ul class="dropdown-menu">
<li>Home Style 1</li>
<li>Home Style 2</li>
<li>Home Style 3</li>
<li>Home Style 4</li>
<li> Home Style 5</li>
<li> Home Style 6</li>
<li> Home Style 7</li>
<li> Home Style 8</li>
<li> Home Style 9</li>
<li> Home Fullscreen<span>new</span></li>
</ul>
</li>
<li class="dropdown megamenu-fw">
Listing
<ul class="dropdown-menu megamenu-content" role="menu">
<li>
<div class="row">
<div class="col-menu col-md-3">
<h5 class="title">PROPERTIES LIST</h5>
<div class="content">
<ul class="menu-col">
<li>Properties List</li>
<li>Single Property</li>
<li>Search by City</li>
<li>Search by Category</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-9">
<h5 class="title bottom20">PROPERTIES LIST</h5>
<div class="row">
<div id="nav_slider" class="owl-carousel">
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider1.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider2.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider3.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider1.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider2.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
<div class="item">
<div class="image bottom15">
<img src="{% static 'images/nav-slider3.jpg' %}" alt="Featured Property">
<span class="nav_tag yellow text-uppercase">for rent</span>
</div>
<h4>Park Avenue Apartment</h4>
<p>Towson London, MR 21501</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown megamenu-fw">
Properties
<ul class="dropdown-menu megamenu-content bg" role="menu">
<li>
<div class="row">
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY LISTINGS</h5>
<div class="content">
<ul class="menu-col">
<li>List Style 1</li>
<li>List Style 2</li>
<li>List Style 3</li>
<li>List Style 4</li>
<li>List Style 5</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY LISTINGS</h5>
<div class="content">
<ul class="menu-col">
<li>List Style 5</li>
<li>List Style 6</li>
<li>Search by City</li>
<li>Search by Category</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">PROPERTY DETAIL</h5>
<div class="content">
<ul class="menu-col">
<li>Property Detail 1</li>
<li>Property Detail 2</li>
<li>Property Detail 3</li>
<li>Single Property</li>
<li>Search by Type</li>
</ul>
</div>
</div>
<div class="col-menu col-md-3">
<h5 class="title">OTHER PAGES</h5>
<div class="content">
<ul class="menu-col">
<li>Favorite Properties</li>
<li>Agent Profile</li>
<li>404 Error</li>
<li>Contact Us</li>
<li>Testimonials</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Features
<ul class="dropdown-menu">
<li class="dropdown">
News
<ul class="dropdown-menu">
<li>news Style1</li>
<li>news Style2<span>new</span></li>
<li>news Style3<span>new</span></li>
</ul>
</li>
<li class="dropdown">
Property Agents
<ul class="dropdown-menu">
<li>Agent Style1</li>
<li>Agent Style2</li>
<li>Agent Style3<span>new</span></li>
<li>Agent Style4<span>new</span></li>
<li>Agent Style5<span>new</span></li>
</ul>
</li>
<li class="dropdown">
Agetn Profile Styles
<ul class="dropdown-menu">
<li>Agent Profile 1</li>
<li>Agent Profile 2</li>
</ul>
</li>
<li class="dropdown">
Testimonials
<ul class="dropdown-menu">
<li>Style 1</li>
<li>Style 2<span>new</span></li>
</ul>
</li>
<li class="dropdown">
FAQ's
<ul class="dropdown-menu">
<li>Style 1</li>
<li>Style 2<span>new</span></li>
</ul>
</li>
<li>Favorite Properties</li>
<li class="dropdown">
404 Error
<ul class="dropdown-menu">
<li>404 Error 1</li>
<li>404 Error 2<span>new</span></li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
<li>Buy Now</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>