Im working on a website that uses the meanmenu, and Ive been struggling for two days on how to get a title to appear inside the mean menu container.
heres my html for the menu:
<div class="row">
<div class="col-lg-4 col-md-8 col-sm-4">
<h2>Title Text</h2>
</div>
<div class="col-lg-8 col-md-12 col-sm-12 hidden-xs">
<div class="main-menu float-right">
<nav>
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>What We Do</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<div class="hidden-sm hidden-lg hidden-md col-sm-2">
<div class="mobile-menu">
<nav>
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li class="hidden-xs">What We Do</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
Heres how it looks expanded:
Collapsed I can't figure out how to get it to stay inline:
I've seen a few posts on similar issues but nothing has worked for me. Im wondering if anyone has done this before?
This happens because you use bootstrap classes not in a right manner
This should works (hope so, because you hide .css from us :) )
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-8 col-lg-4">
<h2>Title Text</h2>
</div>
<div class="visible-xs col-xs-6">
<div class="mobile-menu">
</div>
</div>
</div>
maybe cuz u didnt set col-xs-* grids for your Title Text ( hence its taking 12 columns) try that and if possible please post a jsfiddle :)
Related
I have a footer I am working on called <footer class="site-footer">, inside this footer there is a container <div class="container"> and inside this container, 3 divisions. col-sm-12 col-md-6 and col-xs-6 col-md-3 (2 of col-xs-6 col-md-3).
What I am doing here is making these 3 divisions on the same block. but with spacing.
I used :
.row{
display: flex;
}
row class is the class that contains these 3 divisions.
The picture below shows what I am asking, I need to make distance between the About, Hot Offers and Links sections. On the other hand the social profiles below should be on the right.
The full code of the footer is:
.row {
display: flex;
}
<!-- Bootstrap 4.1.3 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About</h6>
<p class="text-justify">Paragraph about us.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Hot Offers</h6>
<ul class="footer-links">
<li> Offer 1 </li>
<li> Offer 2 </li>
<li> Offer 3 </li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Refund Policy</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
-.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
If you want to add space between your blocks you can add padding on your element (your 4 columns).
With Bootstrap you can add (for example) the class "px-2" to each of your column. Like :
<div class="col-xs-12 col-md-3 px-2">
This will add 0.5 inner space on right and left of your column.
Using spacing with Bootstrap : https://getbootstrap.com/docs/4.0/utilities/spacing/
If you don't use Bootstrap, just add padding style property to your element, like :
.column{
padding: 0 0.5rem // will add margin on right and left
}
Also, if you want to add your social profils on the same row, on the right, you have to put you DIV element on the same DIV with class "row", like below.
With the class "col-md-3" on each DIV, the columns will be displayed on the same row from medium screens to extra large screen.
Bootstrap grid system : https://getbootstrap.com/docs/4.0/layout/grid/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<!-- One row with the 4 columns -->
<div class="row">
<div class="col-xs-12 col-md-3 px-2">
<!-- "About" content -->
<h6>About</h6>
<p class="text-justify">Paragraph about us.</p>
</div>
<div class="col-xs-6 col-md-3 px-2">
<!-- "Hot Offers" content -->
<h6>Hot Offers</h6>
<ul class="footer-links">
<li> Offer 1 </li>
<li> Offer 2 </li>
<li> Offer 3 </li>
</ul>
</div>
<div class="col-xs-6 col-md-3 px-2">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Refund Policy</li>
<li>Sitemap</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 px-2">
<h6>Social profiles</h6>
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i>FB</a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i>LinkedIn</a></li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
-.
</p>
</div>
</div>
</div>
</footer>
Finally, about your comment on your answer "if I use bootstrap everything works out but some of the text went bold, etc", you can only import bootstrap-grid.css or bootstrap-grid.min.css.
It only includes grid system and flex utilities without all styles on elements.
Hi. My portfolio nav menu (list items) no longer functions in Safari and Chrome, but works in Firefox. The creator of this template is no longer available for support. Purchased 5 years ago.
Suggestions (for dummies) to make the anchors work are appreciated. BHNTR.com
———
<div id="main-menu">
<div class="container">
<div class="row">
<div class="hidden-md hidden-lg" id="mobile-menu-button">
<i class="fa fa-bars"></i>
</div>
<div class="col-sm-2 col-lg-2">
<div id="logo-container">
<img src="assets/img/bhntr-logo.svg" alt="bhntr logo">
</div>
</div>
<div class="col-sm-10 col-lg-10">
<nav id="desktop-menu" class="hidden-sm hidden-xs">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>WORK SAMPLES</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
</div>
————
I wrote a website for a travel based start up. It is a static website, not a responsive website. The code is here.
Code:
<div id="mainDiv" class="container">
<div id="header">
<div class="plc">
<h1></h1>
<nav>
<div id="navPos">
<div style="position: relative;right: 113px;">Register</div>
<div style="position: absolute;right: 255px;top: 37px;">Login</div>
<div style="position: absolute;top: 38px;right: 123px;">Market</div>
</div>
</nav>
</div>
</div>
<div id="body" class="container-fluid">
<div id="container">
<div id="overlay"></div>
<div id="menu"></div>
<div id="info">Fill your information here</div>
<div id="formPos"></div>
<div id="or">OR</div>
<div id="fbReg">
<img src="images/fbOne.png" id="fbIcon">
<div id="fbPos">Register with Facebook</div>
</div>
<div id="gReg">
<img src="images/gPlus.jpg" id="gIcon">
<div id="gPos">Register with Google</div>
</div>
<div id="cliPos">
<img src="images/Bistip-in-media.png" id="imgCli">
</div>
</div>
</div>
<div id="footer">
<div id="aboutUs">
About Us
</div>
<div id="aboutList">
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div id="accountInformation">
Account Information
</div>
<div id="accountList">
<ul>
<li>How to login</li>
<li>Create an account</li>
<li>Logout</li>
<li>Join us</li>
</ul>
</div>
<div id="marketInformation">
Market Information
</div>
<div id="marketList">
<ul>
<li>Shop</li>
<li>Shipping</li>
<li>My connection</li>
</ul>
</div>
</div>
</div>
Website in full screen browser appears like this:
Browser is resized like this:
You can see that elements are mixed up. How can I fix this?
This is because you are using position absolute in some elements.
You could try to use bootstrap.css and take off all the positions that you are using.
I am working on a web template which provides 5 HTML pages. I was surprised that inside each page there is the same footer section, as follow:
<footer>
<div class="footerrow1">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<a class="smallogo" href="index.html"><img src="img/logosmall.png" alt=""></a>
<ul class="social_icons clearfix">
<li><img src="img/follow_icon1.png" alt=""></li>
<li><img src="img/follow_icon2.png" alt=""></li>
<li><img src="img/follow_icon3.png" alt=""></li>
<li><img src="img/follow_icon4.png" alt=""></li>
<li><img src="img/follow_icon5.png" alt=""></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<h5>our Location</h5>
<div class="smalladdress">
<p class="mainaddress">9870 St Vincent Place,<br>Glasgow, DC 45 Fr 45.</p>
<p>Freephone:<span>+1 800 559 6580</span></p>
<p>Telephone:<span>+1 800 603 6035</span></p>
<p>FAX:<span class="marginfax">+1 800 889 9898</span></p>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<h5>Overview</h5>
<ul class="list5">
<li>what we do</li>
<li>sales for services</li>
<li>Development Process</li>
<li>Clients</li>
<li>our team</li>
<li>Blog</li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 maxheight1 footercol1">
<h5 class="mbotform1">newsletter</h5>
<form id="form1">
<div class="success">Your subscribe request<br> has been sent!</div>
<fieldset>
<label class="email">
<input type="email" value="Enter Your Email">
<span class="error">*This is not a valid email address.</span></label>
<br class="clear">
<div class="btns">Submit</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="footerrow2">
<div class="container">
<p class="footerpriv" style="text-align:center">© <span id="copyright-year"></span> <img src="img/linefooter.png" alt=""> <a class="privacylink" href="index-5.html">Privacy Policy</a></p>
</div>
</div>
</footer>
If I need to modify it, I need to modify each of the 5 HTML pages. I am an ASP.net MVC web developer where i can easily handle this by defining a layout view which each contain all the shared sections.
So my question is how I can manage this inside my web template's HTML pages?
The answer is no* (with an asterik).
*There is some support in HTML5 for include-able HTML but it is very limited.
So little support, in fact, that Firefox ..."has no plans to support HTML imports"...
You may have luck using the Web Components Library to enable cross-browser support, but that may be more trouble than it is worth for a 5 page template.
i can't find a way to make that work.
i have a sidebar which i pull to the right on desktop side.
i don't know on what row to put the pink div.
This is what i wrote but i don't think it's good.. http://jsfiddle.net/o7vmx2to/
<div class="row">
<article class="col-xs-24 col-sm-18 pull-right">
<div>Left div</div>
</article>
<aside class="col-xs-24 col-sm-6 pull-left">
<div class="row">
<div class="col-xs-24">
<ul class="list-unstyled button_list">
<li>button a</li>
<li>button b</li>
<li>button c</li>
<li>button d</li>
<li>button e</li>
<li>button f</li>
</ul>
</div>
</div>
<div class="row">
<div>This one need to be moved</div>
</div>
</aside>
You need to wrap your stuff in a <div class="container"> which automatically resizes when you change from xs to sm,md and lg
Bootstrap grid system is based on 12 columns not 24. So divide everything by 2
JSFiddle : http://jsfiddle.net/snatgu5f/
Actually it would be a lot easier if you swapped the blue and green divs in the left picture. Because then you end up with a standard bootstrap layout without the need for .pull-right class. I suspect you might actually want this. The code would need to be like this :
<div class="container"><div class="row">
<div class="col-xs-12 col-sm-3">
<nav><ul class="nav nav-stacked nav-pills">
<li class="diabled">Menu</li>
<li>Something</li>
</ul></nav>
</div>
<div class="col-xs-12 col-sm-9">
<article class="row">
Some Text
</article>
<article class="row">
Some more text
</article>
</div>
</div></div>
Yet if you really need the blocks to be positionned like in your picture, here's what you could do (the trick is ton only have one row and either to make the left-menu "pull-left" or the other blocks "pull-right"
<div class="container">
<div class="row">
<article class="col-xs-12 col-sm-9 pull-right">
Green Block </article>
<nav class="col-xs-12 col-sm-3">
<ul class="list-unstyled button_list">
<li>button a</li>
<li>button b</li>
<li>button c</li>
<li>button d</li>
<li>button e</li>
<li>button f</li>
</ul>
</nav>
<article class="col-xs-12 col-sm-9 pull-right">
Purple block</article>
</div>