<header>
<div class="container">
<div class="nav">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="row">
<div class="col-md-2">
<h1>name</h1>
</div>
<div class="pull-right">
About Me
Projects
Skills
</div>
</div>
</nav>
</div>
<div class="myBar">
<img class="img-circle" src="images/pic.jpg"/>
<i class="fa fa-github" aria-hidden="true"></i>
</div>
</div>
</header>
That is my HTML. I'm trying to align myBar to the bottom of the header. this is the css I've tried.
.nav{
position:relative;
}
.myBar {
position:relative;
vertical-align: bottom;
}
My image and icon just appear in a randoms spot towards the middle of the header.
Related
I am working on a top banner with Bootstrap and my condensed menu always is wrapping to a new line for 1024x768. This is working well for resolution greater than 1024x768. Please advise in correcting my html so that the banner stays fixed on the top for 1024x768 resolution.
The banner text has to be centered, the logo should be on the left and logged in user name should be on the right.
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
<div class="navbar-header navbar-brand">
Application Title on Banner Goes Here
</div>
<div class="navbar-nav nav navbar-right">
<button class="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name">
Welcome loggedInUser
</span>
</button>
</div>
</div>
Does this look good to you?
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="container">
<div class="row w-100 justify-content-md-around row-cols-3">
<div class="col-lg-auto">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div>Application Title on Banner Goes Here</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div class="navbar-nav nav navbar-right">
<buttonclass="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name"> Welcome loggedInUser </span>
</button>
</div>
</div>
</div>
</div>
</div>
img
please see this image, you can see there is a small logo on the left, I want to increase its size how to do that? The code is in the image and in text format here too. Please help me fix it.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
Use font-size property in style attribute or change it by css.
I have added as 20px.
Hope that Helps.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i style="font-size:20px" class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
White row appeared below main menu and above jumbotron on a drupal site. I am unable to remove it.
I think that it is css problem but I can't find what exactly causing it. Here is the link to codepen: https://codepen.io/lomachx/pen/WNbLgYa
<body class="html front not-logged-in no-sidebars page-node i18n-ru">
<div id="skip-link" class="skip-link">
Skip to main content
</div>
<div class="menu-wrap">
<div class="full-wrap logo-wrap"><!--c-->
<div id="logo">
<img src="img/logo.png"/>
</div>
<h1 id="site-title">
Cool Site
</h1>
<nav id="main-menu" role="navigation">
<a class="nav-toggle" href="#">Navigation</a>
<div class="menu-navigation-container">
<ul class="menu"><li class="first leaf">Main</li>
<li class="leaf">Articles</li>
<li class="last leaf">About</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="header"><!--c-->
<div class="homebanner">
</div>
<!--New navbar -->
<div>
<nav class="navbar-lower" role="navigation">
<div class="region region-second-menu">
<div id="block-system-navigation" class="block block-system block-menu">
<div class="content">
<ul class="menu">
<li class="first last leaf">Главная</li>
</ul>
</div>
</div> <!-- /.block -->
</div>
</nav>
</div>
</div>
<div class="bckgr-wrap">
<div><H1>Nest</H1></div>
</div>
</body>
</html>
Change body margin-top:50px to the height of your header like below
css
body {
color: #333;
background: #fff;
background-size: cover;
font-family: 'Philosopher', sans-serif;
font-size: 14px;
line-height: 180%;
margin-top: 35px;
}
I am trying to put these two elements side by side. I tried using the float: right or float left, but so far no luck. Here is my html code.
#idd11 {
float: left;
width 100px;
height 100px;
}
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div>
<!--Answer A-->
</div>
</div>
If anybody can help me with it, it would be greatly appreciated. I tried at least :p. I attached a screenshot too: I want to put the A element in the right side of the Items list.
Use display: flex; for the id="MainMenu" . you can then adjust the width and height for its child elements too..
Try learning more about css3 flexbox property
You need three divs to do this. One div to hold the other two child divs. Then float the two child divs next to each other. So put the things you want floated next to each other inside a div and try to float them.
HTML
<div id='parent'>
<div id='child1'>
...
</div> <!-- End child1 div -->
<div id='child2'>
...
</div> <!-- End child2 div -->
</div> <!-- End parent div -->
CSS
#parent{
width: 500px;
}
#child1{
float: left;
width: 40%;
}
#child2{
float: right;
width: 40%;
}
In your code, you have the div you are trying to float to the right within the div you are trying to float to the left. You need to make sure your divs are separated and put into a parent div. Take a look at my example and notice how my divs are separate from each other, but inside a parent div
<div id='parent'> <!-- Look here -->
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
</div>
</div> <!-- End the floating left section -->
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div> <!-- End the floating right Section -->
<!--Answer A-->
</div> <!-- End parent div -->
I've tried my best but unfortunately I am not able to position the Text Center 1 and 2 elements in the middle of the navbar. Hope you can help me out. Thanks.
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text ???">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>
Bootstrap has a predefined centered text class text-center that you can add to any element/div.
example: <div class="navbar-text text-center">
View all bootstrap alignment classes here: http://getbootstrap.com/css/#type-alignment
Just give the div that you want to center the text-align:CENTER; property.
Sometimes it is just easier to use plain CSS instead of Bootstrap.
div.center{
text-align:CENTER;
}
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text center">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>
Class text-center helps you to center Text Center links only when screen-size is less then 768px (but in this case social links fall down!), if screen-size is more 768px, bootstrap's class navbar-text has property float: left and your links will be left side of navbar. To prevent its behavior, you need to apply float: none and display: inline-block properties for middle navbar:
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container text-center">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text myClass">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>
.myClass {
float: none;
display: inline-block;
}
class text-center in this case is used for div.container
JSFiddle-example