My problem is the carets are sliding under the texts in justified bootstrap menu. Like this: http://www.bootply.com/VWo8Oc7mVz
Is there any automated method to have the carets next to title of menu item in justified mode? I have only 1 solution now, i define the widths for every menu item with css, but it is not an effective solution.
Edit: in my development site I already tried reducing the horizontal padding of the anchor elements. It didnt work, there are too much menu item. I refreshed the bootply link also with this.
This happens because the anchor tag under nav has certain padding around by bootstrap. You can reduce left and right padding and giving enough space to caret by adding
.nav>li>a{
padding : 10px 5px;
}
Demo : http://www.bootply.com/0GpdHsNVB4
As you can find in documentation "Pills with dropdowns":
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
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 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]
So basically, I can't seem to change the color of the caret above my dropdown during the hover of the first-child element.
I am using Bootstrap3, the dropdown code is below:
JSFiddle
Nav dropdown
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Drop1 </li>
<li>Drop2 </li>
</ul>
</li>
</ul>
Anyway, I want the caret on top to be colored on hover for the first-child "li" element:
Example
Any ideas on how to change the color of the caret when the first element is hovered over?
Unfortunately you can't do that with just CSS. You have two options I think.. The ugly one - use JavaScript, or you can change the location of the carret to sit inside first element, then:
.dropdown-menu li:first-child:hover:after {...}
I would like to use a Font Awesome arrow instead of the default Bootstrap arrow for the dropdown menu link. I've added the Font Awesome arrow and it looks the way I want (on the left), but still there is the default Bootstrap arrow on the right. How can I get rid of it? I can't say I've tried anything yet as I keep checking and I don't find anything to be removed anywhere.
<ul class="nav navbar-nav">
<li class="dropdown drop-li">
<a href="#" class="dropdown-toggle menu-link" data-toggle="dropdown">
<i class="fa fa-angle-down arrow-down"></i>O Festiwalu <b class="caret"></b>
</a>
<ul class="dropdown-menu drop-one">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</li>
</ul>
This is how it looks: http://postimg.org/image/id3jbf27x/
Why not deleting <b class="caret"></b>?
If you are using Firefox, you can press STRG + I (I for Inspection) to inspect your html Code and see why something is here (Click on the Element in the Main Page) or even not here (Look at the CSS in the right bottom and select via the left bottom).
I have a drop down in column header of the table. The Drop Down element is as shown below
<button class="btn btn-default dropdown-toggle grad1" >
<b>Impact</b><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" style="position:relative;top:inherit;left:inherit;cursor:pointer">
<li><a ng-click="filterImpact('')">All</a></li>
<li><a ng-click="filterImpact('H')">High</a></li>
<li><a ng-click="filterImpact('M')">Medium</a></li>
<li><a ng-click="filterImpact('L')">Low</a></li>
</ul>
But the drop down is not attached to the Main Menu. i.e If i scroll down than the drop down remains in the same location and doesn't move up along with the Header. The obvious solution is to make
position:relative
but in that case the options are hidden behind the table and not accessible to the user. I am missing some css over here..
please help :)
UPDATE
Things tried so far.
position:absolute,fixed,relative
and
z-index:2000 //so it surpasses all elements.
UPDATE
To make things easier here is the plunk.
Select Gender Drop Down is not working here.
Try to add display: inline; to your style.
Try to add z-index attribute to dropdown
change position,top and margin and z-index to be on top.
position:absolute;
top:0;
margin-top:30px;
z-index:9999;
Jsfiddle Sample here