When you look at that pen: http://codepen.io/helloworld/pen/eNpBdb
where I use bootstrap 3 css cdn attached.
<div class="container">
<div class="row">
<ul style="background:orange;" class="nav navbar-nav">
<li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html" target="_self">disclaimer</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/imprint.html#!/content=privacy" target="_self">Datenschutz</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/site-map.html" target="_self">Sitemap</a>
</li>
<li><a title="" href="http://test.com/en/deu/disclaimer/contact.html" target="_self">Kontakt</a>
</li>
</ul>
</div>
When I resize my browser window to under 767px in width, why does the left margin/padding/space of the disclaimer hyperlink and all other 3 hyperlinks disappear?
Who removes that space? I need them as it looks very bad on small devices.
The row class has
margin-left: -15px;
margin-right: -15px
The child column items have their own padding them.
This is meant to line up with the
container that has
margin-left: 15px;
marign-right: 15px;
Solution: Remove the row class, or use the column-xs-12 class for your child element.
The classes you are using "container", "row", "nav", "navbar-nav" are all classes within bootstrap, because bootstrap is built to be responsive after browser resizing it will attempt to make it easier for smaller devices(phones, tablets, etc) to use this can be overcome by adding a custom css file under the bootstrap include and setting certain properties to !important.
Related
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
I am using Bootstrap to make a tabs section. It is looking good and I have used "nav-justified" class. However while shrinking the tab I noticed that the Global Indices Tab which is slightly bigger than other tabs is moving into the second line. It there any way to fix this?
Before Shrinking:
After Shrinking :-
I used media queries to control the width of the tab instead of font and it fixed it. Thanks all :)
#media (max-width: 1100px)
{
.stock-tabs{ min-width: 170px; }
}
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active">FX</li>
<li><a class="stock-tabs" href="#tabs-second" role="tab" data-toggle="tab">US Rate Futures</a></li>
<li><a class="stock-tabs" href="#tabs-fourth" role="tab" data-toggle="tab">Global Equity Indices</a></li>
<li>Commodities</li>
<li>Volatility</li>
</ul>
I'm trying to make this layout for a medium screen, where the black box is my container, and the red/blue boxes are in two different divs as follows:
<div class="col-sm-6">
<ul>
<li>
image
</li>
<li>
image
</li>
<li>
image
</li>
</ul>
<div class="col-sm-6">
<ul>
<li>
image
</li>
<li class="hidden-md hidden-sm hidden-xs">
image
</li>
</ul>
</div>
So the large screen works well, the mediums screen however does not work well, I want the first div to take the primary role and still display as 3 images in a row.
If you have a look at the twitter bootstrap documentation which can be found here you will notice that there are CSS classes for specifying different columns for different device sizes.
Using the information provided here you should be able to add the appropriate classes to your layout so that the layout will respond to the device size the way you want it to.
EDIT:
Remove the <ul>'s and <li>'s and replace them with this instead:
<div class="row">
<div class="col-md-4">...Image...</div>
<div class="col-md-4">...Image...</div>
<div class="col-md-4">...Image...</div>
</div>
I want the vertical border of the vertical tab to run on the whole page instead of finishing off where the tabs end.
however since I have given border-right on the tab it ends
with the last tab that is trending. Giving border-right to the content makes sure the height of the border is right but it spoils the spacing between tab and content.
HTML :-
<div class='tabbable tabs-left'>
<ul class='nav nav-tabs'>
<li class='active'>
All
</li>
<li>
New
</li>
<li>
Featured
</li>
<li>
Ending Soon
</li>
<li>
Trending
</li>
</ul>
</div>
This is not default Bootstrap behavior so you will have to modify the css a little. For this to work, the vertical tab <ul> and all of its parents should have the property height: 100%.
For html and body I would apply the styling directly but for the <div> and <ul> I would use custom class so as not to modify the Bootstrap classes to maintain expected behavior for eventual future use in other layouts.
Here is a demo.
The css to add:
html{
height: 100%;
}
body{
height: 100%;
}
.tabbable.tabs-left.full-height{
height: 100%;
}
.nav.nav-tabs.full-height{
height: 100%;
}
The html to modify:
<body>
<div class='tabbable tabs-left full-height'>
<ul class='nav nav-tabs full-height'>
...........