Can you explain the issue again please as I can’t see what you mean? How do you get the problem to occur and what exactly is occuring?
It may be that I am just looking in the wrong direction 
Hi
As l collapse window, at 768px menu changes to sandwich style. As I make menu shorter and shorter, before collapsing I get for short a menu where I do not have log in sign up, I don’t understand why. It happens just before collapsing. Thank you, Frank
If I understand correctly then there is a point at 768px width where the right nav disappears and that’s because you have the min and max-width media queries at the same point. It looks as though you need to reduce the max-width media query by 1px down to 767px.
i.e.
@media screen and (max-width: 767px) {
body {
background-color: lavender;
}
.side1{display:none;}
.side2{}
.main{}
}
1 Like
Thank you
Applying two previous knowledge resulted new problem. centering doesn’t work after introduceing right navigation(login signup)
please help me, thank you,
frank
i forgot to mention, introduceing switching rightnav with media query. the switching rightnav works, centering looks disabled, i do not understand. i am using bs3.
thank you,
frank
Hi,
You can’t centre floats so you will need to do something like this:
@media screen and (min-width: 768px) {
#main .navbar-nav:first-child {
float: none;
display: table;
margin: auto
}
#main .navbar-nav:first-child>li {
display: table-cell;
vertical-align: middle;
float: none;
white-space: nowrap;
}
}
It would be better if you added a unique class to that nav as navbar-nav refes to many items and I have had to isolate by position in the html require long winded styles.
e.g. add a new class:
<ul class="new-navbar-nav nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
etc...
Then the css could be:
@media screen and (min-width: 768px) {
.new-navbar-nav {
float: none;
display: table;
margin: auto
}
.new-navbar-nav > li {
display: table-cell;
vertical-align: middle;
float: none;
white-space: nowrap;
}
}
Note that the menu is really only centred between the left and right items and not in respect to the viewport as we have discussed before.
Hi
thank you very much, it works fine.
I am sorry for being cheeky, I have another menu experiment with buttongroups. dropdowns on click do strange tings that I don’t understand. unfortunately center doesn’t work properely neither. please have a look, I try to find desperately a solution for this experiment.I use bs3.
thank you, frank
Hi,
You are not allowed to have buttons inside anchors as that is forbidden by the specs. Essentially you are using them as the same thing anyway so just style the anchors to look like buttons. (anchors cannot contain interactive content like buttons and vice versa).
Take out all the buttons (or use the buttons but not the anchors) and adjust the code to target the anchors and then they should look the same. Generally buttons are for actions and links are for links.
The centring routines I gave you before should work as long as you remove the html comment tags that you have placed in the css.
<!-- these are html comments and not allowed inside css files -->
/* These are css comments and used for css comments */
Hi
If I understod right, <a href="#"><button></button> </a> is not right and vice versa. Is it ok, if I use divs instead of button?
You don;t need to use anything else just use the anchor.
e.g.
<a href="#" class="btn btn-primary dropdown-toggle btnnav" data-toggle="dropdown"> Sony 1<span class="caret"></span></a>
Now just style that as you want.
You really should have each button in a list though. (I know bootstrap has button groups but they are usually for some kind of actions rather than a menu).
<ul>
<li> <a href="#" class="btn btn-primary dropdown-toggle btnnav" data-toggle="dropdown"> Sony 1<span class="caret"></span></a><li>
<li> <a href="#" class="btn btn-primary dropdown-toggle btnnav" data-toggle="dropdown"> Sony 1<span class="caret"></span></a><li>
etc etc...
You use buttons (button) when you want some action to take place or when you need to post a form or send data etc… You use anchors when there is a destination to go to… Sometimes you have actions you want to take on the anchor (like the arrow) but in those cases its still probably best to keep them all as anchors to make the styling easier and more consistent.
I have to go out now back tomorrow
thank you
what i tried tom accieve is when menu collapses, i get menu in two row, just it looks so i’ve got it in a wrong way
If the menu was working on the smaller screen before then add your new rules in the larger screen media query (min-width media query) otherwise your new rules affect the smaller screen displays.
If you go back to your old demo you can just style those anchors to look like buttons.
Have to rush now back tomorrow.
Ok, Thank you
I try another version but here I have problem with dropdown and styling.
thank you, se you tomorrow
Hi,
You seem to have messed up the structure. Get rid of those extra divs and have every menu item in its own list like this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#">WebSiteName</a> </div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"> <a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-target="#menu1" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" id="menu1">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" data-target="#menu2" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu" id="menu2">
<li><a href="#">Page 2-1</a></li>
<li><a href="#">Page 2-2</a></li>
<li><a href="#">Page 2-3</a></li>
</ul>
</li>
<li> <a href="#">Page 21</a></li>
<li><a href="#">Page 22</a> </li>
<li> <a href="#">Page 31</a></li>
<li> <a href="#">Page 32</a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
Hi
thank you for answer. what I tried is to get a two column menu after collapse. with buttons it worked, but the dropdown does strange rthings.
If you run the code in browser you can se the two column after collapse. clicking on dropdown button(after collapse) does strange things .thank you
You don’t need to change the html and indeed you shouldn’t change the html to a non semantic structure just so that it fits with your design.
You could have made two columns by setting the list items to 50% width using Flexbox or indeed old fashioned floats. You didn’t need to touch the html.
Always use semantic html first and then make your design from there.
I can’t offer code as I am out on a mobile but I will look back in tomorrow.
1 Like
Thank you
please have a look on monitor where collapsing shows the results I designed, just the click is not ok.
thank you
I don’t know which example you are referring to now or whether you have reverted to the code I gave? You need to go back to a working example and then start again and let me know what is supposed to happen?
I don’t know if you have abandoned the buttons and the centring and the re-ordering etc.
I’ve fixed the code back to a good state and vaidated the code and given you 2 columns for thew drop down at smaller screens. here is the forked codepen.
If you want the login and sign to come first on the collapsed menu then just change the source of the html so that they come before the centre menu code.
Maybe we can take it from here and adjust to what you need.
Hi
thank you for answer. the login/signup is ok on the end of collapsed menu, just I could not handle the dropdown part.
unfortunately I have to return to the previousmenu experiment. I added a fixed/relative option, controlled by media query, but suddenly the navbar doesn’t go to the end of html page on fulscreen, do you have any idea why?thank you, frank
You have made the navbar position:fixed and that means its width is dictated by its content unless you tell it otherwise. If you want it to stretch full width you need left:0 and right:0 at the same time (or width:100% assuming border-box model).
.fixed-relative{
position:fixed;
top:0;
left:0;
right: 0;
}