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>
Related
I'm trying to target a title, which is also a title. The word I want to hide is contact from the following html. There doesn't seem to be another way as even the ID is linked to the main menu so hiding it by ID would hide whole menu.
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown">
<a title="Contact" href="https://4309.co.uk/contact/">Contact</a>
<ul role="menu" class="dropdown-menu"></ul>
</li>
</ul>
</div>
Perhaps I have explained this poorly. If you look in mobile in the top left cornerhere, drop the drop down menu by toggling the hamburger icon, you will see three letters act, the end of the word contact how to get rid of that? In desktop the whole word appears below the logo. It's an item with children, and I've tried using higher tier selectors and applying them to the ID, such as ul li, but this doesn't work. Hiding the ID will hide the parent and the children, when I need to separate it from its children and hide it individually.
There are some clever ways to hide text using CSS, although that's not the most ideal approach. This approach uses a clever combination of text indentation to achieve the end result. You could use the attribute selector to target any <a> tags where the title attribute is "Contact" as such:
a[title='Contact'] {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
As referenced in this post, which can offer some more ideas as well. Notably:
a[title='Contact'] { color: transparent; }
First of all you need to target the a element which has a title of Contact. In CSS, this can be done with the following selector:
a[title="Contact"]
Then, you need to hide the element. There are two options for doing this:
display: none;
visibility: hidden;
Here is a code snippet which demonstrates the first of these two methods (using the display property):
a[title="Contact"] {
display: none;
}
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-3530" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-3530 dropdown">
<a title="Contact" href="https://4309.co.uk/contact/">Contact</a>
<ul role="menu" class="dropdown-menu"></ul>
</li>
</ul>
</div>
The bullet point is still there, so you can see that only the text Contact is being hidden, and not the li element. The CSS has targeted only the one element with that specific title.
Okay I checked, the "contact" you're talking about is under a span tag and it's on a different base level, so Imma answer your question on a conceptual basis:
So in order to hide that contact from that dropdown menu, all you'd have to do is change that element's color to the background color so it's invisible and stop the link from working using like no hover effects and removing the link from CSS using a media query of course so that it doesn't affect when browsed from other devices than mobile here's how to do it
link.href = '';
leave it blank and you are all set, It won't show you that link anymore or none can click when using mobile
As per your question now:
you are seeing the "act" instead of "contact" because of no margin when in mobile view, so fix the margin first and then if you have access to the mainframe code,
use the methods I said above and it would work I promise
I am having a problem when displaying nav-pills on mobile devices when I make it justified. For example, with the below code an iPhone displays the tabs justified but with the "It NavTab" pill on two lines. Is it possible to have the first nav-pill display at full width, and have the last two nav-pills justified underneath the first nav-pill? Please advise. Thanks!
<ul class="nav nav-pills nav-justified">
<li class="nav-item"><a class="nav-link active" href="#">Hello!</a></li>
<li class="nav-item"><a class="nav-link" href="#">Testing!</a></li>
<li class="nav-item"><a class="nav-link" href="#">It NavTab</a></li>
</ul>
You can do that by setting the first nav-item's width to 100% and resetting its flex-basis as .nav-justified sets the flex-basis of nav-items to 0.
.nav-justified .nav-item .nav-link {
white-space: nowrap;
}
#media (max-width: 767px) {
.nav-justified .nav-item:first-child {
width: 100%;
flex-basis: auto;
}
}
Fiddle: https://jsfiddle.net/aq9Laaew/75802/
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.
I am trying to figure out how to switch between nav-stacked nav-pills for mobile and non-nav-stacked nav-pills for everything else using Bootstrap.
For example, for desktop:
<nav>
<ul class="nav nav-pills">
<li role="presentation" class="active">About</li>
<li role="presentation">Services</li>
<li role="presentation">Pricing</li>
<li role="presentation">Contact</li>
</ul>
</nav>
And for mobile:
<nav>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">About</li>
<li role="presentation">Services</li>
<li role="presentation">Pricing</li>
<li role="presentation">Contact</li>
</ul>
</nav>
Let me answer my own question, in case anybody else is helped by it. I found that a good way is to use the .hidden class. For example in the above code, the first block's class would be modified as such:
<ul class="nav nav-pills hidden-xs">
And the second block's class would be modified as such:
<ul class="nav nav-pills nav-stacked visible-xs-inline">
Hope this is helpful!
This depends on the size of the screen that you want the specific menu to show in.
Give the nav an ID.
<nav id="desktopNav">
and
<nav id="mobileNav">
This is what I would do.
FOR DESKTOP
I would hide the mobile menu
#mobileNav{ display:none;}
FOR MOBILE
I would hide the desktop menu
#desktopNav{ display:none;}
Basically, what this will do, is show the desktopNav when you are looking at it on a computer or maybe tablet, and then show the mobileNav when on a phone.
Within your CSS, you want to do this for mobile devices
#media only screen and (max-width: 600px) {
ENTER YOUR CSS CODE HERE
}
This would go at the end of your CSS file. This tells the brower that any device that is under 600px it will do something else. You would put the desktopNav in there. This is called a responsive website.
What's the best way to fix the width and height of left tabs in twitter bootstrap to use it as a fixed size navigation bar? Questions are better illustrated in the code below.
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="nav-header">Questions</li>
<li class=""><a data-toggle="tab" href="#lA">------ Question 1 -------</a></li>
<li class="active"><a data-toggle="tab" href="#lB">------ Question 2 ------</a></li>
</ul>
<div class="tab-content">
<div id="lA" class="tab-pane">
<p>How do I fix the width of this section as to avoid using the --------</p>
</div>
<div id="lB" class="tab-pane active">
<p>Can I fix the height as well?</p>
</div>
</div>
</div>
I'm not really familiar with Bootstrap but as no body else has answered, here goes...
Since the two elements you have highlighted both have IDs, why cant you just give them specific widths / heights?
#1A {
width: 300px;
}
#1B {
height: 30px;
}
As I say, I'm not familiar with Bootstrap so I may be misunderstanding your question but that seems like the simple solution to me.