No that’s still showing the new css in the middle panel.
Look at my demo.
Here’s a screenshot again to clarify.
Is that any clearer?
As I said before you are not supposed to add all the head code of a document into the left panel because it will over-ride the css from the middle panel. If you do put a whole page into the left panel then you need to add your css to the left panel otherwise it is all out of order.
Hi
thank you, it works, is there any documentation or any description that helps understanding what is happening behind the code, thank you,frank
thank you
I am using in the same way in my html file. I thought in the css part should stay the style content, thank you, frank
Hi
I made the recomended changing
The bootstrap documentation has the basics of how the dropdown works.
If you google bootstrap3 dropdowns you will find a few tutorials also.
Generally though when using bootstrap components you would use the built in classes to change the appearance of the btn (btn-primary or btn-danger etc).
If you want custom styling then you need to dig into the code and use your custom CSS to over-ride the bootstrap defaults. You can see what styles are applied by using the web inspector and then you write your own rules in the same manner and with the same weight and place them in your custom css file which follows at the end of the code.
I can’t teach you all of the CSS but if you learn how to use the web inspector you can copy existing rules and modify them to suit your needs.
Bootstrap is quite a comprehensive platform and has extensive styling and does need some skill in order to create custom skins to their elements.
I experience a strange thing: after closing the dropdown I need to click aside, beside the button, in order to work the hover part. please help me
That’s the :focus state and is normal behaviour.
If there was no :focus state then a keyboard user could not navigate to that element. Any element that receives :focus remains in the focus state until you click somewhere else.
You can of course style it a different colour if you want but it needs to be different from the normal state . Look at the examples on the bootstrap page as they have hover and focus (and probably:active )rules that are different to the open (clicked) state.
Change the CSS to this and in this order:
.dropdown > .dropdown-toggle.btn-default:focus{background:gray}
.open > .dropdown-toggle.btn-default[aria-expanded=true] {background:red}
Now the focus state will be gray.
thank you, frank
Hi
I need some help with a new menu. first I would like to center the main menu, the second problem: is it necessary to use jquery for using css order to change place of login, signup after collapsing menu, third problem group is @media query: the smallest width is 300px for mobile devices then next level switching class of a div containing menu between fixed and static depending on display size.
Let’s take the first problem first. the code is:
thank you frank
Add display:flex to .main but preferably inside the min-width media query.
Not sure exactly what you mean but if you want ‘login’ to be above ‘sign up’ link then you can do that with the ‘order’ property in flex. (If you meant that you want the login and signup below the dropdown links then I would need to look at it again.)
Here are the 2 changes needed.
@media screen and (min-width:768px) {
.main {
justify-content: center;
display: flex;
}
}
@media screen and (max-width:768px) {
.navbar-right {
justify-content: center;
display: flex;
flex-wrap: wrap;
}
.navbar-right li {
flex: 1 0 100%
}
.navbar-right>li:first-child {
order: 1
}
}
You lost me 
You may need to break that down and talk about the elements you want to change (more specifically) and what you want to happen.
As mentioned before you don’t specifically target 300px and under at all as there are no devices there. You need to be looking at 480px and below.
What determines the width at where you need to target elements depends on where your design starts to fall apart. If you have designed fluidly then you should easily be able to cater for devices 480px and below in one go. Don’t worry about devices smaller than 300px as there aren’t any. The smallest iphone is 320px but generally that would be catered for in the media queries for bigger phones unless you have not coded fluidly enough.
Hi
thank you for answer and I am sorry for not being enough accurate. as the menu collapses, I would like ul containing login signup on the bottom. I tried css order but it did not work without jquery however it should.
thank you
this is my changing
thank you
If you want the login and signup on the bottom of the dropdown itself you can still do that with flex but it will effect the animation speed a little as flex is rendered quite slowly when order is changed.
Here are the changes needed.
@media only screen and (max-width: 768px) {
#myNavbar.collapse.in {
display: flex;
flex-wrap: wrap;
}
#myNavbar > .container-fluid {
flex: 1 0 100%;
}
#myNavbar > .container-fluid:first-child {
order: 1;
height: 0;
overflow: hidden;
}
#myNavbar.collapse.in > .container-fluid:first-child {
height: auto;
overflow: visible;
}
}
The problem is that bootstrap is using display:none to hide the menu which means that the order property isn’t valid until you show the menu and then flexbox works out how to change the order.
This is the problem with hiding stuff with display:none (although I believe the problem may be addressed in future versions of CSS in order to hide things without changing the display).
thank you
I do not understand why css order does not work? thank you
You’ll have to clarify what you mean a little
If it was in answer to my observations about the animation then the ‘order’ property is working but it just takes a little time to redraw.
If you are trying to use it somewhere else then ‘order’ is only valid for elements that are flex items (direct children of an element with display:flex).
The code I gave you above swaps the elements around which is what I thought you were after?
Yes, but after clicking on the hamburger menu, it jumps after dropdown drops. I try to eliminate the jumping.
thank you
this is another experiment, not working properely
thank you
sorry, this is the right one
No I can’t see a way around that with that setup. It seems to be a bug with flexbox to some degree. It’s compounded by the method used in boostrap to hide the menu.
It may be possible that you could avoid the problem by redesigning the wide screen and changing the order of the html at wide screens and then use flexbox to re-order-it. Then when you get to small screen it would be in the right place and not to be swapped with the order property.
Unfortunately I am away until Sunday so can’t really look at it until then. Hopefully someone else will have a look while I’m away:)
Hi
thank you for previous answers. I have another experiment with a different issue. when menu collapsing there is an “inbetween” part when side ul is not displayed. can you help me with this one?
thank you