I have 2 divs I want to show in one line when browser resizes. On all screens it will show in one line, but now it breaks in second line when browser resizes.
HTML
<div class="navbar" id="navbar">
<a href="#" class="logo">
<img src="logo.png">
</a>
<div class="topnav-con">
<div class="menu-top-menu-container">
<ul class="nav-menu" id="menu-top-menu">
<li>nav 1</li>
<li>nav 2</li>
</ul>
</div>
</div>
</div>
CSS
.navbar {
.max-width: 1310px;
}
.logo {
float: left;
margin-left: 20px;
margin-right: 25px;
}
.topnav-con {
-moz-box-sizing: border-box;
background: none repeat scroll 0 0 #7A9CBD;
clear: none;
float: left;
max-width: 1203px;
width: 100%;
}
Don't keep the width of the .topnav-con as 100%.
Keep some ratio between both class .topnav-con and .logo
.logo{
width: 20%;
}
.topnav-con{
width: 80%;
}
But it's not preferable while displaying navbar. Keep the ratio till some min-width: 600px.
Then break the menu into next line.
Related
I am designing a responsive HTML page using bootstrap css. I am using the navbar-brand class in which there is a logo. The code for that segment is:
<div class="grad">
<a class="navbar-brand" id="navbar-logo" href="http://someUrl"><img src="images/someLogo.gif" height="43" alt="logo"></a>
<div>
<ul class="nav navbar-nav mycss-aligned">
<li><span class="name">LastName, FirstName</span></li>
<li><span class="logo1">some</span><span class="logo2">Stuff</span></li>
</ul>
</div>
</div>
That mycss-aligned is just a few dimensions for the list below it and is not relevant to our problem so I am not sharing it. The relevant CSS from BootStrap has been slightly modified by me to suit my needs and it is as follows:
.navbar-brand {
float: left;
height: 60px;
padding: 10px 10px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand>img {
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
height: 100%;
max-width: 100%;
width: auto;
margin: 0 auto;
margin-left:125%;
margin-top:-5%;
}
I have a HTML div which is center aligned and has 60% width of total screen. I am trying to match the start of the division with the start of the logo. While I can achieve this, as you can see, I am required to use an unusually high percentage for the margin-left value in .navbar-brand>img. That being said, Even when I can achieve that, the design is barely responsive and the logo does not slide across along with the division when the page is resized. The funny thing is
<div>
<ul class="nav navbar-nav mycss-aligned">
<li><span class="name">LastName, FirstName</span></li>
<li><span class="logo1">some</span><span class="logo2">Stuff</span></li>
</ul>
</div
is perfectly responsive. What can I do to solve this?
First I would suggest that you use more of the bootstrap components to create a context for the elements you want to use. E.g. there is a navbar-fixed-top class.
You can see my fork of the code on jsfiddle There is an outline on all divs to visualise the alignment.
Here is how I would write the same
<header>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-content">
<a class="navbar-brand" id="navbar-logo" href="http://someUrl">
<img src="images/someLogo.gif" height="43" alt="logo">
</a>
<ul class="navbar-list">
<li><span class="name">LastName, FirstName</span>
</li>
<li><span class="logo1">Some</span><span class="logo2">Stuff</span>
</li>
</ul>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div style="width: 60%; margin:0 auto; text-align:justify;">
<br>
<br>
<br>
<br>
<br>
<br>This is just some uberRandom text to show how the division is getting aligned and justified
</div>
</div>
</main>
And the re-written css
.navbar {
background: linear-gradient(white, grey);
box-shadow: 0 0 10px #333;
}
.navbar-content {
width: 60%;
margin: 0 auto;
font-size: 13px;
line-height: 17px;
}
.navbar-list {
float: right;
margin-top: 5px;
}
.navbar-brand {
padding: 0;
}
.navbar-brand>img {
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
height: 100%;
max-width: 100%;
padding-top: 10px;
margin: 0 auto;
}
Notice how there is an inner content of the navbar that is set to same width as the actual content (the paragraph). That way you don't have to use those silly margins and the image and text should align.
I have a bootstrap navbar that I need to span the entire width of the screen, but have the logo and link at the right stay the consistent width of the container below it, as illustrated below, and not have the LINK on the right jump to the logo and logo shoved to the left below 768px when shrunk down:
[=============LOGO------------------------------------------LINK=============]
| |
| |
| |
When the user downsizes the screen, the navigation items should remain inline with the content below.
<nav class="navbar navbar-default">
<ul class="nav nav-justified centered">
<li><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="140" height="40">
</li>
<li><a class="getapp" href="#">LINK</a>
</li>
</ul>
</nav>
<div class="container">
CONTENT
</div>
.navbar {
background-color: #000;
}
.centered {
width:100%;
margin:0 auto;
}
.nav>li{
display:table-cell;
}
JSFIDDLE: LINK
I found a simple solution by setting the outer div of the nav and the content container to use .inside which contains the nav and content to the same width. When the window is resized, the navigation and page content grow and shrink at the same rate.
<nav>
<div class="inside">
<div class="logo">
<img src="logo.png">
</div>
<div class="links">
<img src="image.png">
</div>
</div>
nav{
position: fixed;
top: 0;
height: 70px;
width: 100%;
background: #000;
z-index: 99999;
}
.logo{
float: left;
padding-top: 15px;
}
.links{
float: right;
line-height: 50px;
padding-top: 20px;
padding-right: 15px;
}
.inside{
width: 90%;
margin: 0 auto;
}
I can't figure out how to get the "This is the header" div's text to move down without effecting the rest of the page. When I add padding-top to the header div, it increases the entire div's size. That's not what I want. I just want to move the text down to the middle of the div.
<body>
<div id="container">
<div id="name">
<h1>Byron Woodfork</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contacts</li>
</ul>
</div><!--ends nav div-->
<div id="header">
<p>This is the header</p>
</div><!--ends header div-->
#nav {
float: right;
width: 400px;
height: 60px;
background-color: #07f50b;
}
#name {
width: 560px;
height: 60px;
float: left;
background-color: #06f706;
}
#header {
width: auto;
height: 500px;
background-color: #282e34;
}
One easy way is to set the line-height of your header div to have the same height as the div itself (so line-height: 500px). This doesn't work as nice if your text takes up more than one line, though.
On the following jsfiddle:
http://jsfiddle.net/oshirowanen/4fgkj/
Here is a snippet of the HTML as it would have been too much HTML to post up here if I posted the whole thing:
<div id="main">
<div class="inner">
<ul class="column">
<li class="one">
<ul>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
<li>SIDE MENU</li>
</ul>
</li>
<li class="two">
<ul>
<li class="main_content">
<p>content goes here</p>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
You will see that I have a menu and some content. The problem is that I don't want the content to wrap around the menu.
How do I stop that from happening?
First of all, don't use li for content, it's only used for displaying lists (such as menus).
Second - to answer your question - a structure like this might do what you want, and is quite regularly used:
HTML:
<div class="wrapper">
<div class="header">
header
</div>
<div class="wrapright">
<div class="right">
right
</div>
</div>
<div class="left">
left
</div>
<div class="footer">
footer
</div>
</div>
CSS:
.wrapper{
width: 90%;
margin: 0 auto;
}
.header{
float: left;
width: 100%;
background-color: #f4f4f4
}
.wrapright{
float: left;
width: 100%;
background-color: #cfcfcf
}
.right{
margin-left: 220px;
background-color: #afeeee;
height: 200px;
}
.left{
float: left;
width: 200px;
margin-left: -100%;
background-color: #98fb98;
height: 200px;
}
.footer{
float: left;
width: 100%;
background-color: #f4f4f4;
}
body {
padding: 0px;
margin: 0px;
}
LIVE DEMO
Of course, you'll have to adjust the CSS to change background colour, padding,... and the HTML to adjust the content. But I think you'll be able to figure that out.
Well, don't tell it to wrap around... in :
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
}
just remove the line
float:left;
You have to set min-height to your css rules (#main .column .one). If you set it, your content will be right the menu, but will not be wrapped around it.
#main .column .one {
padding:10px 10px 10px 0px;
float:left;
min-height:600px;
}
All you need to do is add this to your styles:
.main_content {overflow: hidden;}
However, I must say, using a ul for page layout like that is not a good idea. Semantically, your page content is not an unordered list.
For a project of mine I decided to start using Responsive Design. The guide I was using wasn't definitive and purely introductory so I got lost somewhere there and can't find the problem here. If use the code below you'll render yourself a navigation menu. It looks fine on a 13 inch screen but go to a smaller screen size by perhaps shortening the width of your browser you'll notice that the navigation menu will take over the logo's space. How can I tweak this so that the navigation menu won't be on top of the logo and perhaps will stop before it goes over the logo?
HTML:
<header class="bar_top">
<div class="logo_block">
<a href="index.php">
<img alt="Logo" src="/logo.png" class="logo">
</a>
</div>
<nav class="menu_above">
<ul class="menu">
<li class="menu_inner">Home</li>
<li class="menu_inner">Our Products</li>
<li class="menu_inner">Services</li>
<li class="menu_inner">About Company</li>
<li class="menu_inner">Contact
<ul class="menu_layer">
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 1</a>
</li>
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 2</a>
</li>
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 3</a>
</li>
</ul>
</li>
<span class="phone_us">000-000-0000</span>
</ul>
</nav>
</header>
CSS:
.bar_top {
background-color: #FFFFFF;
font-size:14.5px;
width: 100%;
height: 82px;
top: 0;
left: 0;
position:absolute;
z-index: 99;
}
.logo_block {
display: block;
position: absolute;
z-index: 998;
}
.logo {
margin-left: 30px;
margin-top: -3px;
height: 85px;
}
.menu_above {
width: 960px;
margin: 40px auto;
float:right;
}
.menu_layer {
margin-left: -40px;
}
.menu_contact_is {
color: #ffffff !important;
}
a.menu_contact_inner {
color: #ffffff !important;
}
.phone_us {
font-size: 1.5625em;
margin-left: 75px;
}
Try the attribute margin: auto; to set elements on the center of the screen or the container, instead of using static values to position the elements
Also you can read about flexible design and responsive design to learn about.
If you are trying to keep the menu next to the logo on the left side of the page you should try this:
.logo_block {
display: inline-block;
vertical-align: top;
}
.menu_above {
margin: 40px auto;
display: inline-block;
}
It's quite common to wrap the content with a div container that has a fixed with and auto margin on the sides to keep it on the center of the page.
You should also consider to revise the other elements on you page as you are using unnecessary relative positioning. ;)