I am usually pretty used to find out my own issues when it comes to Bootstrap styling and elements, but this one.. just keeps giving me a headache, and therefore i need to ask you guys here.
I'm overriding some bootstrap styles, like the dropdown (hamburgermenu trigger dropdown) so it goes on top of other elements, rather than moving it downwards..
If you inspect my JSFiddle example after expanding the menu you see that i'm missing the relation to :
.navbar-default .navbar-nav>.active>a
.. the styling is completely gone, and i dont know why.
Here is a link to my JSFiddle
Found the issue.
its here in this HTML
<a id="lnkTeamOverviewMobile" style="color:black" class="visible-sm" href="/EventCalendar" href="javascript:__doPostBack('ctl00$lnkTeamOverviewMobile','')">Eventkalender</a>
you have a class visible-sm which is set to display:none!important in bootstrap.css , If you use this class you are saying that to display this element only when you are in a small device, And Computer Monitors are usually Medium..
Remove the class visible-sm and it must work fine
Working Demo
Related
I'm a newbie so forgive me stupid questions ˆˆ
I am creating a website with bootstrap. It all works fine, yet I want to overwrite some CSS. In the attached picture you see how I used the developer tool to inspect my site. Now I see a lot of CSS but I find it hard to know how to write it in my own CSS styles document.
When you look at the menu item you see "Food" which is within and the li class is .active
Above that there is nav navbar-nav and above that is navbar-collapse collapse...
Now I want to change the font color of Food and of the other buttons and I want to change the background color of only the buttons.
When I write:
.active {color: red;}
Nothing changes... so do I have to add all the classes before and if so when to use a point and not...
.navbar-collapse collapse .nav navbar-nav .active
But this somehow does not overrule the bootstrap.min...
Help is appreciated
Thank you in advance!
And be safe people, we are in this together
my site
It worked using the Chrome developer tool, inspect the element, copy the css from the developer tool and paste it in my own css
Though you most certainly can override all of the css with various methods such as using !important; (not recommended as it is considered bad practice to do so), since you are using bootstrap there is a much easier way for you to achieve what you want.
The classes text-danger for the font color, and bg-white for the background should give you what you seek, however i recommend you check out Bootstrap's documentation for the various other kinds of classes you can use to modify your font or background.
you can edit the bootstrap style
inspect the element(Ctrl+ Shift+I)
in you can see style and url of style , you can edit style, then click url of style then Ctrl+A then Ctrl+C then you go to bootstrap css and delete all then paste you style
that you edited
Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.
I'm rather new to programming and stackoverflow has been very useful so far. So sorry if this questions might seem a bit simple to some of you, but I really can't figure this one out:
I'm using Bootstrap to develop my page and created a button which works just fine. Just below that button, I want the Facebook-Like & Twitter Button. This is what I'd like. But interestingly, the FB button always shows on the same line (hence left of the BOOTSTRAP BUTTON (that's how i named it in the code).
BOOTSTRAP BUTTON
<div class="fb-like pull-right" data-href="http://www.hafenkran-zuerich.ch" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
As you see, I've set the button's style to: display: block. But still the Facebook Button is shown on the left. I've even tried to set the BOOTSTRAP BUTTON within a , which are by default block elements. But that didn't solve the problem either. Any ideas?
Try removing the pull-right class from both the Bootstrap button and Facebook button.
That class is causing both elements to be floated right, which is why they are displayed next to one another.
Here is a Fiddle: http://jsfiddle.net/JkD8g/
If however you need to leave the pull-right class on both elements, you can clear the Bootstrap button's float by applying clear:right or clear:both to the Facebook button.
Here's another Fiddle: http://jsfiddle.net/Hudpz/
I'm currently trying to follow a tutorial to make an image gallry a-la-Apple but for now, I got a little problem that I can't understand the reason.
Here's the JSFiddle: JSFiddle.
If you check correctly, you should see a white space on top of the second and third li item of the submenu in the slider. The first one doesn't have it.
There's the wanted result: Tutorialzine
If someone can find the reason, it would be appreciated!
Note: I'm using Twitter Bootstrap!
Rule #1 for list-based menus: Put all styling on the A-tag using display:block. Do not style the LI tag except for floats/positioning.
See my tutorial: http://preview.moveable.com/jm/ilovelists/
I have a project that I am working on for some simple CSS buttons, and I was trying to make a matching drop-down menu for them. The problem is that when I click an item in a sub-menu, all the parents above it go to the active state as well. I was going to use a parent selector, only they don't exist. Here is the demo page: http://jsfiddle.net/td7bk/4/.
Thanks!
Edit: For now, the demo is only fully compatible with Firefox, because it uses the -moz-transition and -moz-box-shadow property, and the border-radius property.
This is possible with just css if you are willing/able to adjust your html a tiny bit. I noticed you have a span tag wrapping text in a few li elements but not all of them so i wasn't sure if this was a requirement or not.
See http://jsfiddle.net/td7bk/8/ for an example.
Also, if you're in the mood for a quick tip, take a look at the adjusted css selectors. Simplified and more efficient.
Hope this helps!