I used a bootstrap template to make my site; even the template has the menu down the left side of the page instead of across the top of the page.
The menu text is white so when scrolling the menu disappears over areas that have a white background.
I would like to find a way to have the menu across the top of the page - I assume this is how the menu should be as when scrolling the grey top strip scrolls down, so I assume the grey strip is intended for the menu so the menu will scroll down across the top of the page.
After reading your reply I had the idea to check the site in Safari Browser and as you say the menu is correct in Safari - which is more confusing.
I know to clear the Browser cashe, and there is also code in the meta links to also clear browser cashes. Yet the menu is Chrome is down the side as I mentioned originally.
I guess this maybe the menu issue is to do with the template use in Chrome?
Chrome Version 66.0.3359.139 (Official Build) (64-bit) on Apple Mac OS 10.13.4
Ok, I see that the problem occurs at screen widths between 1198px and 768px and then the text goes to the side. At above 1198px width the menu is across the top and below 768px the menu is in the hamburger.
I suppose the question is what do you want to happen when the top menu no longer fits on the top? It has to go somewhere. You have too much text to fit on one line at smaller widths so you may have to go to the hamburger menu early or try to squash the text inbto place.
I have to go out now so this is rushed but try something along these lines.
@media screen and (max-width:1198px){
.navbar .navbar-collapse{width:100%;}
.navbar-nav > li > a{padding:20px 5px 10px}
}
@media screen and (max-width:840px){
.navbar .navbar-collapse{clear:both;float:none}
.navbar .navbar-collapse ul{margin-top:-5px!important;}
.navbar-nav > li > a{padding:0px 0px 10px 25px}
}
@media screen and (max-width:767px){
.navbar .navbar-collapse{width:100%;margin-left:0;}
.navbar-nav > li > a{padding:10px 15px}
}
There is still an overlap so you may have to move the MINDWAVES text out of the way.
Thank you for your help with this PaulOB. I hadn’t realized that issue, so even with Chrome - if I increase the window size the menu fits.
I tried to reduce the items on the top menu, even including eliminating the text ‘Mindwaves’ but that didn’t seem to change the situation of how the menu behaves.
I looked through the style ccs, but I couldn’t find @media screen. I only found
/* ========================================
Media queries
========================================= */
@media (min-width: 959px) and (max-width: 1199px) {
.navbar-nav {
margin-top: 20px;
}
}
@media only screen and (min-device-width : 979px) and (max-device-width : 1024px) {
.navbar-nav {
margin-top: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.navbar-nav {
margin-top: 20px;
}
}
@media (max-width: 767px) {
.navbar.navbar-fixed-top {
background-color:rgba(0,0,0,1);
}
.navbar .navbar-collapse ul.nav {
background-color: #444;
width: 100%;
float: none;
margin:0;
padding:0;
}
.navbar .navbar-collapse ul.nav li {
border-bottom: 1px solid #666;
}
I am unsure whether I should replace any of the ccs text or add the code you explained? If just add the code then should I place it at the bottom of the ccs?
One thought, there seems to be a lot of space between the text ‘Mindwaves’ and the menu. Is there a way to shift the menu more towards the center or even place at the center. I don’t mind to delete the text ‘Mindwaves’ - I just added it to replace the text originally on the template.
Just add the code I gave you at the end of your CSS file so that you can test. You probably shouldn’t mess with your theme styles directly anyway (that applies to most frameworks or templates).
Use the following code which should center the menu at large screens also.
.navbar-collapse collapse{text-align:center;}
.navbar-nav{display:inline-block;float:none;}
@media screen and (max-width:1198px){
.navbar .navbar-collapse{width:auto;margin-right:0;}
.navbar-nav > li > a{padding:40px 5px 10px}
}
@media screen and (max-width:880px){
.navbar-nav > li > a{padding:38px 0px 10px 15px}
h1 a.navbar-brand{font-size:16px;margin-left:20px;}
}
@media screen and (max-width:840px){
.navbar .navbar-collapse{clear:both;float:none;}
.navbar-nav > li > a{padding:0px 0px 10px 25px}
.navbar-nav{position:relative;top:-20px;}
h1 a.navbar-brand{font-size:16px}
}
@media screen and (max-width:767px){
.navbar .navbar-collapse{width:100%;margin-left:0;}
.navbar-nav > li > a{padding:10px 15px}
}
With that code in place the different widths will look like the following screenshots with live css injected.
The problem with using templates is that they are designed for a certain way and if you try to change them you would be better off creating your own from the start.
Yes, that solved the issue PaulOB, the page looks perfect now, thank you.
I am not at the level that I can make a page from scratch, so I subsequently rely on templates. At present I only understand the rudimentary issues, if some more complicate issue arrises I am lost.
The biggest issue I found with templates is they seem to use very large images, so I use these as a base size to add my own images, but usually they turn out to be quite large, around 127kb, it’s a trade off though.
I appreciate all your kind help and support PaulOB. Regards.
