Separate Menu from Header


#1

Hello,

My site is www.corsewerks.com and I would like to know if there is a way I can separate the Slider from the Header or separate the Menu items. Currently, my slider images are hiding the Menu items since some backgrounds are darker and no matter what color font I use for menu items, they are still hidden in some images depending on if the image is dark or light. I would like to have the menu bar and the site logo separated from the slider and not be on top of it. Please let me know if anyone knows how this can be achieved?

Regards,
Roger


#2

Hello rovercw,

there are at least two options.
You can give the menubar a background from the very beginning (https://athemes.com/forums/topic/menu-background-3/#post-65778) or you can give the slider a padding-top to decrease the size of the images, so that you have a background. I would recomment the first solution.

Ps: Just looked at your site from a smartphone and the images seem to be very large. Maybe make them a little bit smaller, if it is not an issue of my mobile data transfer


#3

Hi,

I tried to add this code to my css but it did not work.

            .site-header.float-header {
	background-color: #000 !important;
	}	

Do I need to remove this code below?
.site-header.float-header {
padding-top: 20px;
padding-bottom: 20px;
}


#4

You don’t need to remove the code with the padding. This has nothing to do with the color.

Apply this code:


.site-header.float-header, .site-header {
  background-color: #000 !important;
}

And please, please make your slider images smaller! They have more than 10MB size and are 5000px wide, nobody need this. Maybe make them 1920*1080px and save them for the web, that they have less than 300KB. Otherwise nobody will visit your page and wait for it to load the massive images.


#5

Thank you for the help, I appreciate it. I tried the header thing, still not working. For images, yes I am looking into reducing the size, I need them to fill up the whole screen left to right so it is a full-size slider. Looking into how to do that and reduce the image size.


#6

Does maybe this work?

#masthead {
  background-color: #000;
}

With images in 1920*1080 you will have the dimensions of normal wide screens I think. In addition the slider has a with of 100% (of the screen). So it would fill up the whole screen.

I really hope that the code above works. I would appreciate an answer again whether it worked.

Best regards


#7

The header is not working still, the menu bar still shows as part of the header and only when I scroll down is when the menu items are clear since the background shows white and text shows black but when you don’t scroll down, the menu items are not clear since they are part of the slider which causes it to not be clear on some images.

I re-sized the images, the response time is much better now, thanks :slight_smile:


#8

I would like to know if there is a way I can separate the Menu from the Slider. Currently, my slider images are hiding the Menu items since some backgrounds are darker and no matter what color font I use for menu items, they are still hidden in some images depending on if the image is dark or light. I would like to have the menu bar & logo separated from the slider. Anyone know how this can be done?
URL: http://www.corsewerks.com


#9

Hello rogercw,

I merged your two topics together - there is no need to create a new one for the same issue. Just push it up next time, then we can see that this is still not fixed.

What exactly did you with my code? Normally it should give the navigation a black background. And that is what you want, or isn’t it? What happened when you use my code?
You could also use #fff instead of #000 to make it a white background.


#10

The navigation gets a white or black background but the issue is that, it only shows that when you scroll down. If you simply go to http://www.corsewerks.com and notice that the menu items are hidden. The code you provided does not specifically separate the menu from the slider. Menu is still on top of the slider and hence when you are on the site, the menu links get hidden with the background of the slider images, only when you scroll down is when you see the separate background of the menu.


#11

Please try this code for a white background:


.site-header {
 background: #fff !important;
}

Ehm, I took a look at your page code again and it looks like you posted your code into a media query. Media queries are the parts of code for the responsive design.
I rezised the window and saw, that the header (#masthead) has got a black background at a screen size lower than 767px.

Please make sure you post your code into a new line. There can’t be any brackets ( e.g. } ) left open. Because they are closing the code parts and rules. If you post your new code into the media query brackets, it will work with only the max-/min-width that stands there.


#12

This worked perfectly, thanks. I was placing it in the wrong section earlier, sorry new at this and trying to self-learn by just diving in to it. After applying this, the menu items do appear separately with a white background but the slider images are now cut off from the top. Do you know of a way to fix this?

Also, not sure if I should create a separate thread for this one but the site does not display correctly on mobile, the menu items don’t appear at all and the slider images are cut off left to right unless you hold the phone horizontally, then the images are fine.


#13

No problem for this. It can happen to everyone.

I tryed to give the images a margin or padding-top, but this doesn’t really fix the problem with the cut.

Did you maybe changed some other code of the mobile version? I also tryed to fix this, but I need one more day until I can try some new code. Tomorrow at this time I maybe found something.


#14

I fixed the slider, instead of using the header slider that comes with this theme, i used a Next Gen Slider plugin and inserted that in my css code which worked.

<li>Thank you for looking into the mobile issues, that is still a problem I need fixed.
Also, I have another problem now, where my Footer has disappeared, before it used to appear in a black background with white text 'Copyright 2014 by Corse Werks. All rights reserved.' Not sure how this disappeared, I see it in footer.php file but somehow it's not showing up on the site?

#15

Whoops don’t know what happened with the earlier post:

I fixed the slider, instead of using the header slider that comes with this theme, i used a Next Gen Slider plugin and inserted that in my css code which worked.

Thank you for looking into the mobile issues, that is still a problem I need fixed.
Also, I have another problem now, where my Footer has disappeared, before it used to appear in a black background with white text ‘Copyright 2014 by Corse Werks. All rights reserved.’ Not sure how this disappeared, I see it in footer.php file but somehow it’s not showing up on the site?


#16

The odd thing is that the footer appears on other pages, just disappeared from the Home page.


#17

UPDATE: The Footer issue is now fixed, I had to move the slideshow to be inside content div instead of header.
The outstanding issue I have now is the mobile issue. The site does not display correctly on mobile, the menu items don’t appear at all and the slider images are cut off left to right unless you hold the phone horizontally, then the images are fine. Not sure how to resolve this?


#18

I checked your website on my PC and on my smartphone again. Is it still right that you’re using the next gen slider now? This will be the point why the images aren’t 100% as high as the screen and why it is very small on the smartphone now.

With saying “the menu items don’t appear” you mean your mobile “hamburger” navigation? This wouldn’t be your menu items and even the hamburger navigation is still there. It is just white, like the background. You have to change it of course.


.btn-menu {
  color: #000 !important;
}

Use this code to make the menu icon black.

When you’re trying to learn, maybe try to inspect your site with the firefox or chrome web developer tools. They are really helpful to see what part of code is still there and working and how you need to colorize something.

Are there still any issues?


#19

Yes, I am using the NextGen slider, how do I fix the issue of “the images aren’t 100% as high as the screen and why it is very small on the smartphone now.”?

I am trying to open my site on mobile and its not even working anymore, just keeps loading but nothing comes up?

I changed it to color 000 from fff in the Mobile Navigation section of css, is this the correct way? or should I be simply adding the code you provided under the Mobile Navigation section?

}
#mainnav-mobi ul.sub-menu > li > a:hover,
#mainnav-mobi > ul > li > ul > li.active > a {
color: #000
}
.btn-menu {
float: right;
font-size: 28px;
font-family: “FontAwesome”;
color: #000;
text-align:center;
width: 28px;
height: 28px;
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


#20

Actually, It comes up on mobile now and see the issue you are talking about where there is additional space under it and then the slideshow just shows the images separated on mobile instead of a slider. Any idea how I can get this fixed? I am using NextGen Slider on another one of my websites too which works fine on mobile. That website is inspiredautosport.com but the same plugin slider wont work on mobile correctly on corsewerks.com. Not sure why that is.

Thank you for your help.