How to remove unwanted line breaks in html/css - html

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>

Related

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 get Bootstrap Navbar to appear on one line in the xs layout?

I have the following Bootstrap navbar, but when it displays in the xs layout, I want it to show on one line. How can I force it to display on one line and not break. It obviously has enough room.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Company Name</a>
</div>
<ul class="nav navbar-nav visible-sm-block visible-md-block visible-lg-block">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-cog"></span>
<ul class="dropdown-menu">
<li>Settings 1</li>
<li>Settings 2</li>
<li>Settings 3</li>
<li class="divider"></li>
<li>Settings A</li>
<li>Settings B</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<ul class="dropdown-menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="divider"></li>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
</ul>
</li>
</ul>
<div style="display:none" class="navbar-collapse">
<p class="navbar-text fix_navbar_left_larger">Company Name</p>
<p class="navbar-text fix_navbar_left_xs">Company Name</p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<p class="navbar-text visible-sm-block visible-md-block visible-lg-block"></p>
<a class="navbar-brand navbar-brand navbar-right dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand navbar-right" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
</div>
</div>
</nav>
<div class="pagecontent">
<p class="visible-xs-block">seen on xs screens.</p>
<p class="visible-sm-block">seen on sm screens.</p>
<p class="visible-md-block">seen on md screens.</p>
<p class="visible-lg-block">seen on lg screens.</p>
</div>
</div>
Add class "pull-left" to the navbar header like so...<div class="navbar-header pull-left">. Also add class "pull-right" to the two dropdown list items like so...<li class="dropdown pull-right">.
See Fiddle
For future reference, just use the navbar default template from http://getbootstrap.com/components/#navbar to compare with your own code to find mistakes.
try adding pull-right to those two <li class="dropdown"> classes
For this you have to play with pull-left pull-right classes of bootstrap.
See my fiddle
Navbar is taking full width so give that class pull-left and other pull-right but your inner menu, they also needed float to get in one line so i gave both of them float left and right and you got the result :)

Pure CSS Menu Doesn't Work When Image Laid on Top

I have a website made where I want the header to slightly lay on top of my CSS menu. I lose my CSS menu when the image is laid overtop and would like to retain my CSS menu.
I want the CSS menu in the NAVI div to lay underneath the last image in the topLayer div.
Can anyone please explain a solution.
http://jsfiddle.net/hjkopytko/AfWD5/
HTML:
<body>
<div class="wrapper">
<header>
<div class="topLayer">
<a href="https://www.facebook.com/sawascana" target="_blank"><img src="media/images/metalFacebook.png" width="50" height="50"
style="display:block;position:absolute;margin-left:1050px;margin-top:25px;z-index:10" /></a><a href="https://twitter.com/sawascana" target="_blank"><img src="media/images/metal-twitter.png" width="50" height="50"
style="display:block;position:absolute;margin-left:1050px;margin-top:100px; z-index:10"/></a><a href="index.html"><img src="media/images/logoWhiteText.png" width="400" height="103"
style="display:block; position:absolute;margin-left:75px;margin-top:25px;z-index:10;"/></a> <img src="media/images/metalTop.png" width="1200" height="373" style="display:block;auto;z-index:5" />
</div><!-- end of topLayer-->
</header> <!----- end of header-->
<div class="container">
<div class="whiteContainer">
<div id="navi">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<div class="rec">
<ul>
<li class="sa">YOUR SA
<ul>
<li class="sa">Executive Council</li>
<li class="sa">Bylaws</li>
<li class="sa">Minutes</li>
<li class="sa">Mission/Vision</li>
<li class="sa">Reports</li>
<li class="sa">SIAST Board Rep</li>
</ul>
</li>
<li class="campus">CAMPUS LIFE
<ul>
<li class="campus">Blood Clinics</li>
<li class="campus">Campus Policies</li>
<li class="campus">Events</li>
<li class="campus">Fitness Club</li>
<li class="campus">Student Lounge</li>
<li class="campus">Orientation</li>
<li class="campus">Promotions</li>
<li class="campus">Spirit Awards</li>
<li class="campus">S A F E</li>
</ul>
</li>
<li class="service">SERVICES
<ul>
<li class="service">Info</li>
<li class="service">Aboriginal Awareness</li>
<li class="service">AGM</li>
<li class="service">Health & Dental</li>
<li class="service">Advocacy/Rep</li>
<li class="service">Campus Shop</li>
<li class="service">Dean's Interaction</li>
<li class="service">Income Tax Returns</li>
<li class="service">Legal Consultation</li>
</ul>
</li>
<li class="involve">GET INVOLVED
<ul>
<li class="involve">Campus Groups</li>
<li class="involve">Leadership</li>
<li class="involve">Program Rep</li>
<li class="involve">Sub Committees</li>
<li class="involve">Volunteering</li>
</ul>
</li>
<li class="hello">CONTACT
<ul>
<li class="hello">Ad Opportunities</li>
<li class="hello">Contact Form</li>
<li class="hello">Office Info</li>
<li class="hello">Staff</li>
</ul>
</li>
</ul>
</div>
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
</div>
<!-- end of nav -->
<div id="slider" style="top:-125px;"> <!--> <-->
<ul>
<li><img src="media/images/banner1.jpg" /></li>
<li><img src="media/images/banner2.jpg"/></li>
</ul>
</div> <!--end of slider-->
<div id="column">
<p>Left Column</p>
</div>
<div class="column">
<p>right column</p>
</div>
<!--End of white container-->
</div>
<!-- end .container-->
<div class="push"></div>
<!---meant to push content to bottom of page-->
</div>
<footer>
<!---wrapper-->
<img src="media/images/metalBottom.png" width="1200" height="269" style="display:block; margin-left:auto; margin-right:auto ;z-index:10;" /> </footer>
</body>
Check out this question. Click through a DIV to underlying elements
Should fix it for you. Basically add pointer-events:none; to your overlaid image.

Z-index [Bootstrap 3]

I have the code below for a sidenav, how do i make it display 5 list items at a time so the user has to scroll to see more?
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="float:left">
<div class="well sidebar-nav">
<ul class="nav">
<li><strong>Select a subject</strong></li>
<li class="active">Maths</li>
<li>English</li>
<li>Art and Design</li>
<li>Drama</li>
<li>Music</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Biology</li>
<li>Home economics</li>
<li>Physical Education</li>
<li>Computing Science</li>
<li>French</li>
<li>German</li>
<li>Mandarin</li>
<li>Religious Education</li>
<li>Modern Studies</li>
<li>Geography</li>
<li>History</li>
<li>Creative computing</li>
<li>Craft, Design and Technology</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->