I am trying to add navbar using bulma css , am new to css couldn't understand why the navburger span is aligning below logo image and not the far end adjacent to the logo. Am using the code with some js toggle active presented in bulma navbar examples here. (https://bulma.io/documentation/components/navbar/)
Any pointers are much appreciated. Thank you.
EDIT
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NewApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<style>
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }
#d { grid-area: d; }
#e { grid-area: e; }
#grid {
display: grid;
grid-template-areas:
"a a a a"
"b c d e";
grid-row-gap: 1rem;
}
#media (max-width: 512px) {
#grid {
grid-template-areas:
"a a a"
"b c d"
"e e e";
}
}
.center, .center-column, .top, .right, .bottom, .left {
display: flex;
justify-content: center;
align-items: center;
}
.center-column {
flex-direction: column;
}
.top { align-items: flex-start; }
.right { justify-content: flex-end; }
.bottom { align-items: flex-end; }
.left { justify-content: flex-start; }
.single-spaced, .single-spaced * {
line-height: 1;
}
#media (max-width: 1024px) {
.desktop {
display: none;
}
}
</style>
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<router-outlet>
<app-header></app-header>
</router-outlet>
header.component.html
<nav class="navbar is-transparent">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<a class="navbar-burger burger" data-target="navbarExampleTransparentExample">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div id="navbarExampleTransparentExample" class="navbar-menu">
<div class="navbar-start">
<!-- FIXME: fix the href link.. -->
<a class="navbar-item" href="https://localhost:4200/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="https://bulma.io/documentation/overview/modifiers/">
Modifiers
</a>
<a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="https://bulma.io/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
About me
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<!-- FIXME ; fix the href -->
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://stakeradix.io" target="_blank" href="https://twitter.com/intent/tweet?text=RadixDPOS: secure radix consensus through stake delegation &hashtags=stakexrdwithmozhi&url=https://stakeradix.io&via=pspk__janasena">
<span class="icon">
<i class="fab fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<!-- FIXME: Go to the official radix page -->
<a class="button is-primary" target="_blank" href="https://www.radixdlt.com/">
<span class="icon">
<i class="fas fa-info-circle"></i>
</span>
<span>Explorer</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
Expected:
Actual:
Related
I'm trying to add a bootstrap footer to my project. It works well on the big screen but when you start scaling down the screen, the footer is placed in the middle of the page instead of the bottom. What am I doing wrong?
#media only screen and (max-width: 1150px) {
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
}
<div class="bigcontainer">
<div class="box1">
<h3>RENOVATIONS</h3>
<p><br /></p>
<p>
At <em>Razca Designs</em>, we specialize in interior renovation design, from small kitchen updates to complete home remodels. We have a wealth of experience and expertise in creating personalized spaces that reflect our clients’ unique styles and
personalities.
</p>
<p><br /></p>
<p>
Our team will work closely with you every step of the way to bring your project to completion. We take the time to fully understand the specific challenges and pain points of each client in their current home, and use this information to design a tailor-made
solution that addresses each individual need. Our approach is to provide you with a beautiful and functional home that you’ll love spending time in
</p>
<p><br /></p>
<b><em>Our passion is creating personalized, welcoming spaces that are tailored to you and your family. With Razca Designs, you can trust us to transform your home into a space that exceeds your expectations</em></b>
</div>
<div class="box2">
<img src="textimages/reno10.jpg" alt="" class="img-fluid" />
</div>
<div class="box3">
<img src="textimages/renov-3.jpg" alt="" class="img-fluid" />
<img src="textimages/ren101.jpg" alt="" class="img-fluid" />
</div>
<div class="box4">
<h3>RENOVATIONS</h3>
<p><br /></p>
<ul class="ab">
<li>
Reviewing permits or managing permit applications if necessary
</li>
<li>reate the neceesary drawings, including:</li>
<p>Existing and demolition plans</p>
<p>Proposed plans</p>
<p>Construction plans</p>
<p>Electrical plans.</p>
<p>Furniture Plans</p>
<li>
Providing materials and finishes according to your design palette
</li>
<li>Design of custom furniture</li>
<li>Requesting quotes; ordering and coordinating deliveries</li>
<li>Dealing contractors and craftsmen</li>
<li>Dealing with suppliers and overseeing quality control</li>
<li>
Final design steps, like finishes and confirming forniture and cabinetery.
</li>
</ul>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-lg-start bg-white text-muted">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 link-secondary">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3 text-secondary"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Products</h6>
<p>
Angular
</p>
<p>
React
</p>
<p>
Vue
</p>
<p>
Laravel
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Useful links</h6>
<p>
Pricing
</p>
<p>
Settings
</p>
<p>
Orders
</p>
<p>
Help
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p>
<i class="fas fa-home me-3 text-secondary"></i> New York, NY 10012, US
</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i> info#example.com
</p>
<p>
<i class="fas fa-phone me-3 text-secondary"></i> + 01 234 567 88
</p>
<p>
<i class="fas fa-print me-3 text-secondary"></i> + 01 234 567 89
</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025)">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Carousel wrapper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
Here is my screen shot
I was able to figure out what I was doing wrong
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
margin-left: 150px;
}
.bigcontainer::after {
width: 98vw;
position: absolute;
z-index: -1;
right: 0;
}
.bigcontainer > div {
width: 50%;
height: 50%;
padding: 18px;
}
.box1 {
margin-bottom: 20px;
}
.box3 {
display: flex;
gap: 10px;
}
.box3 img {
width: 45%;
height: 30rem;
}
.box2 img {
width: 70%;
}
#media screen and (max-width: 908px) {
.bigcontainer > div {
width: 100%;
height: max-content;
flex: 0 0 100%;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
padding: 15;
margin-left: 0;
margin-top: 150px;
}
.text-container {
width: auto;
margin-bottom: auto;
}
.testing {
width: auto;
margin: auto;
}
.box2 {
order: 4;
}
.box2 img {
width: 100%;
height: 100%;
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.box2 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}
.box1 {
font-family: "sans";
line-height: 150%;
}
.box4 {
font-family: "sans";
line-height: 150%;
}
h3 {
font-size: 18px;
font-weight: bolder;
}
.box4 h3 {
padding-left: 15px;
}
.imge-4 {
width: 100px;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
.text-container {
width: 600px;
margin-bottom: 90px;
}
.testing {
width: 600px;
margin-left: 20px;
}
#media screen and (max-width: 568px) {
.bigcontainer > div {
width: 100%;
height: max-content;
flex: 0 0 100%;
}
.bigcontainer {
display: flex;
flex-wrap: wrap;
width: 98vw;
align-items: center;
margin: 20px;
font-family: "sans";
padding: 15;
margin-left: 0;
margin-top: 150px;
}
.testing {
width: auto;
margin: auto;
}
.text-container {
width: auto;
margin-bottom: auto;
}
.box2 {
order: 4;
}
.box2 img {
width: 100%;
height: 100%;
}
.box3 {
flex-wrap: wrap;
}
.box3 img {
width: 100%;
}
.box2 img {
width: 100%;
}
.bigcontainer::after {
display: none;
}
}
I started playing with Bulma and Buefy framework and I'm stuck with this issue.
I'm trying yo replicate the google apps menù, I've create a navbar-item div and put the foloowing code inside:
<div class="columns">
<div class="column">
<a>
<b-icon
icon="cloud-outline">
</b-icon>
<span>function 1</span>
</a>
</div>
<div class="column">
<b-icon
icon="compass">
</b-icon>
Function 2
</div>
<div class="column">
<b-icon
icon="scatter-plot">
</b-icon>
Function 3
</div>
</div>
the output is:
The result that I want to achieve is the following:
How can I center the icon and move the text to a new line?
You could use flexbox to style your links:
.custom-nav a {
display: flex;
flex-flow: column nowrap;
align-items: center;
padding: 1em;
background-color: rgba(0, 0, 0, 0.1);
}
.custom-nav i {
font-size: 3rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.1/css/bulma.min.css" integrity="sha256-1nEaE91OpXJD7M6W5uSiqxhdmrY+lOOTHC1iUxU9Pds=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<div class="columns custom-nav">
<div class="column">
<a href="#">
<i class="fas fa-box-tissue fa-2x"></i>
<span>function 1</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-handshake-slash fa-2x"></i>
<span>function 2</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-head-side-mask fa-2x"></i>
<span>function 3</span>
</a>
</div>
<div class="column">
<a href="#">
<i class="fas fa-shield-virus fa-2x"></i>
<span>function 3</span>
</a>
</div>
</div>
You can do this with css flex. By using the additional keys:
flex-direction (says what direction the flex should apply)
align-items (aligns the items inside the container)
justify-content (spacing the items inside the container)
.columns {
display: flex;
justify-content: space-evenly;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.columns {
display: flex;
justify-content: space-evenly;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
<div class="columns">
<div class="column">
<span>icon</span>
<span>function 1</span>
</div>
<div class="column">
<span>icon</span> Function 2
</div>
<div class="column">
<span>icon</span> Function 3
</div>
</div>
I wrote the media queries for smaller screens ,but i can not seem to make them work for ipads. I have a problem with the width of the header and the navbar. They don't seem to take up the full width even though I wrote margin and padding 0 (as an asterisk). The max-width of the html is 1600px. Here is a Print screen.
<header>
<div class="Header-TopContainer">
<div class="Header-MyAccountItem">
<i class="fas fa-user account "></i>
</div>
<div class="Header-MyAccount">
My Account
</div>
<div class="Header-CartItem">
<i class="fas fa-cart-plus cart"></i>
</div>
<div class="Header-Cart">
Cart
</div>
<div class="Header_CheckoutItem">
<i class="fas fa-check-circle check"></i>
</div>
<div class="Header-Checkout">
Checkout
</div>
<div class="Header-VerticalLine"><img src="./Images/first%20hr.png" alt="vertical line"></div>
<div class="Header-Search"><i class="fas fa-search" id="search"></i></div>
</div>
<div class="line mqtablet">
<img src="./Images/long.png" alt="vertical line">
</div>
<div class="Header-LogoContainer mqtablet">
<div class="Header-LogoText">
<h1>Car<span style="color:#ff3448">Store</span></h1>
<p class="Header-LogoSubText">Best Car Seller</p>
</div>
<div class="Header-Phone">
<div class="Header-PhoneIcon">
<i class="fas fa-mobile-alt mobile"></i>
<h2>+123 456 7890</h2>
</div>
<div class="Header-PhoneNumber">
<p class="Header-WorkingHours">mon-fri:8:30am-7:30pm; sat-sun:9:30am-4:30pm</p>
</div>
</div>
<div class="Header-container">
<div class="Header-Wishlist">
<div class="Header-WishlistVLine vline">
<img src="./Images/first%20hr.png" alt="vertical line">
</div>
<div class="Wishlist">
<div class="Header-WishlistIcon">
<i class="fas fa-star wishlisticon"></i>
</div>
<div class="Header-WishlistText">
Wishlist
</div>
</div>
</div>
<div class="Header-Compare">
<div class="Header-WishlistVLine">
<img src="./Images/first%20hr.png" alt="vertical line">
</div>
<div class="Compare">
<div class="Header-CompareIcon">
<i class="fas fa-car compareicon"></i>
</div>
<div class="Header-CompareText">
Compare
</div>
</div>
</div>
<div class="Header-MyCart">
<div class="Header-WishlistVLine">
<img src="./Images/first%20hr.png" alt="vertical line">
</div>
<div class="Mycart">
<div class="Header-MyCartIcon">
<i class="fas fa-cart-plus cart mycarticon"></i>
</div>
<div class="Header-MyCartText'">
My cart
</div>
</div>
</div>
</div>
</div>
</header>
<nav class="toggle-menu">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<ul class="MainMenu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Reviews</li>
<li>Locations</li>
<li>Contacts</li>
</ul>
</nav>
#media(min-width:768px) and (max-width:1024px) {
header {
position: relative;
height: 17rem;
text-align: center;
}
.Header-TopContainer,
.Header-Phone {
display: none;
}
.mqtablet {
display: flex;
flex-direction: column;
text-align: center;
}
.Header-LogoText {
margin: 0.5rem;
}
.line {
position: absolute;
top: 9rem;
}
.Header-container {
margin-left: 10%;
}
.vline {
display: none;
}
nav {
text-align: center;
}
ul {
flex-wrap: nowrap;
justify-content: flex-end;
padding-right: 9rem;
}
ul li a {
padding-left: 5rem;
}
I have commented out the bug(with #characters) in the navigation part of the code where I am getting the issue. Try removing the .navbar-brand as mentioned in the comment and you will get to see.
I'm curious to know that what's happening under the hood when navbar-brand is assigned to its(element with .nav-tabs) adjacent element which conflicting with it
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="author" content="NeelDUnstoppable" />
<meta name="description" content="A rough template for html page created just for enhancing and getting a precise grip over the rules" />
<title>html template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="nav" role="navigation">
<!-- ######## Remove the .navbar-brand class from the below <a> element and the .nav-tabs class in <ul> element works completely fine ######### -->
Blasting off with bootstrap
<ul class="nav nav-tabs">
<li role="presentation" class="active">Tickets</li>
<li role="presentation">Stations</li>
<li role="presentation">About</li>
</ul>
</div>
<div class="container">
<div class="row well well-lg">
<div class="col-md-6">
<h2>The Fastest way to space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button type="button" class="btn btn-lg btn-default">Take the Tour</button>
<button type="button" class="btn btn-lg btn-primary">Book Tickets Now</button>
</div>
<div class="col-md-6 hidden-sm hidden-xs">
<img src="images/img-header.jpg" alt="Blasting off" title="Blasting off image"/>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase"></i>
<h3>Book Today</h3>
<p>Even if you're traveling tomorrow, you can still get tickets today. We have a number of conveniently located ports around teh globe to service everyone</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-random"></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, why not try out a transporter? Despite the claims, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6">
<i class="glyphicon glyphicon-send"></i>
<h3>RocketBus®</h3>
<p>For cheapest fares, catch the next RocketBus® to the stars. Cheaper on you wallet, and easiest way to make friends</p>
</div>
</div>
</div>
<div class='footer'>
<div class='container'>
<div class='row'>
<div class='col-sm-4 col-md-3 col-xs-6'>
<h4>Who We Are</h4>
<p><i>Blasting Off With Bootstrap</i> is the fastest way to space. <a href='#'>Book your ticket today</a>!</p>
<p><a href='#'>More About Us <i class='glyphicon glyphicon-arrow-right'></i></a></p>
</div>
<div class='col-sm-2 col-xs-6 col-md-offset-1'>
<h4>Links</h4>
<ul class='list-unstyled'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tickets</a></li>
<li><a href='#'>Stations</a></li>
</ul>
</div>
<div class='clearfix visible-xs'></div>
<div class='col-sm-2 col-xs-6'>
<h4>Stay in Touch</h4>
<ul class='list-unstyled'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
</ul>
</div>
<div class='col-sm-4 col-md-3 col-md-offset-1 col-xs-6'>
<h4>Contact Us</h4>
<ul class='list-unstyled'>
<li><i class='glyphicon glyphicon-globe'></i> Orlando, FL<li>
<li><i class='glyphicon glyphicon-phone'></i> 1-555-blast-off<li>
<li><i class='glyphicon glyphicon-envelope'></i> <a href='mailto:#'>blastingoff#codeschool.com</a><li>
</ul>
<p>Blasting Off With Bootstrap ©2214.</p>
</div>
</div>
</div>
</div>
<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.7/js/bootstrap.min.js"> </script>
</body>
</html>
The related .css file:
.features .glyphicon {
font-size: 32px;
}
.row {
margin-bottom: 20px;
}
.quote {
background-color: #444;
color: #e1e1e1;
}
.quote blockquote {
border: none;
margin: 0;
}
.quote footer {
color: #c1c1c1;
}
section, header {
background-color: #fff;
}
body {
}
.footer {
padding: 20px 0;
}
/*
#demo-nav {
display: none;
}
.show-nav #demo-nav {
display: block;
}
*/
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 200px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 200px;
}
.footer {
color: #efefef;
background-color: #333;
}
.footer a {
color: #9af7fe;
}
#media only screen and (max-width: 768px) {
body { margin-bottom: 400px; }
.footer { height: 400px; }
}
Using bootstrap 3, I have:
<div class="container"> </div> {with specific width}
<div class="container-fluid">
<nav> <nav>
</div> {need container-fluid to make mnu background full width}
I would like to center first menu item with left edge of picture above and also last menu item to center with right edge of text above.
Here is a link to the JSFiddle demo.
Do maximize JS fiddle result window to see menu in full width
The idea is that space between all menu items is same. I try to get result with some padding of <a> tag and <li> tag, but for bigger screen I must then write queries. Hence, how do I have an "universal" solution?
How about using flexbox to add the property value space-between and justify your unordered list items, combined with a media query to prevent affecting your hamburger menu.
#media (min-width: 768px) {
.navbar-nav {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.navbar-nav > li {
display: flex;
}
.navbar-nav > li > a {
justify-content: center;
align-items: center;
}
}
jsfiddle
CODE SNIPPET:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.container {
width: 1100px;
padding: 0px;
}
.navbar-nav {
padding: 0;
margin: 0;
}
.menuCon {
background: grey;
}
#mainMenu > ul > li > a {
color: #000;
}
#media (min-width: 768px) {
.navbar-nav {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.navbar-nav > li {
display: flex;
}
.navbar-nav > li > a {
justify-content: center;
align-items: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ">
<div class="row headRow">
<div class="col-xs-12 col-sm-12 col-md-4 borderRight width80">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=230%C3%9781&w=230&h=81" class="img-responsive logo" id="logo" alt="logo" />
</div>
<div class="hidden-xs col-sm-6 col-md-4 mobileMarginText ">
<div class="headerTextOne">
<div>top textttttt</div>text text</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 text-left ">
<p class=" headerPhone">12345678999 710</p>
<p class=" headerMail">hi#hello.com</p>
</div>
</div>
<!-- /row menu-->
</div>
<div class="container-fluid menuCont ">
<div class="row">
<div class="col-xs-12 col-md-12">
<nav class="navbar navbar-default noBorder height40 menuBox">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#mainMenu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="nav navbar-nav">
<li>First
</li>
<li>Home1
</li>
<li>Home2
</li>
<li>Home3
</li>
<li>Home4
</li>
<li>Last
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</div>