-
AuthorPosts
-
May 30, 2014 at 11:00 pm #272640
I removed the logo and have made the background semi-transparent with Quick CSS:
.logo { display: none !important; }
#header_main { background: rgba(0,0,0,0.6); }1) With the logo removed, the mobile menu header disappears, and you only see the bottom half of the the three lines menu button. How do I get the mobile header to show correctly with no logo?
2) I am using a full screen color section with a background image. When I add the logo back, the mobile menu header moves the color section top to below the header, which is good, but it keeps the color section height at 100% window height instead of reducing the height? How can I fix this?
3) I would like the header/menu height and transparency to not change when the user scrolls down. I would like it always to have height:36px. I added #header_main .container {height: 36px; line-height: 36px;} , but it does wacky and different results on both a page with transparent and not-transparent header
May 30, 2014 at 11:47 pm #272670Hey!
1. Add this to the Quick CSS:a#advanced_menu_toggle { top: 30px; } @media only screen and (max-width: 767px) { #header_main{ min-height: 65px; } }
2. Could you illustrate this issue in a mockup/screenshot?
3. You can disable the shrinking in the theme options (header layout > header behavior).
Cheers!
JosueMay 31, 2014 at 3:11 am #272715Hi Josue,
1. Thanks, works great
2. Were you able to access the Private Data I sent? That website shows this issue on the main page. Just make your web browser narrow width.
3. This got me a step closer. The menu is now no longer shrinking. But I also want it to be 36px high and to never lose the transparency I set: #header_main { background: rgba(0,0,0,0.6); } Ideally, I would also like to be able to change the color of the menu item that corresponds to the current page.Thanks,
MicahMay 31, 2014 at 3:33 am #272718Hi!
2. You say that that happens when you add the logo back, as there is no logo right now i can’t see the difference.
3. This will do it:#header_main .container, .main_menu ul:first-child > li a
Best regards,
JosueMay 31, 2014 at 3:54 am #2727212. Sorry, miscommunication. The logo had to be there before we fixed #1, because before without the logo, the header would collapse. Now that the header doesn’t collapse, you can see the issue even without the logo.
3. To make the link red, I used: li.current-menu-item { color: red } . I am not sure how to get the transparent menu to be 36px and to not switch to the default menu when I scroll down.
Thanks so much for the help!
May 31, 2014 at 3:59 am #272722Seems my code didn’t pass through, to fix 3, add this to the Quick CSS:
#header_main .container, .main_menu ul:first-child > li a{ line-height: 36px !important; height: 36px !important; }
Cheers!
JosueMay 31, 2014 at 4:28 am #2727282. This issue still exists. To be sure you get what I am saying: Start with a wide browser, notice that the top of the background image is full screen and you can see it behind the header. When you make the browser narrow enough to turn on the mobile menu, that image gets shifted down below the header, which is smart, but the image height is not reduced by the header height, so the image continues down past the visible screen. You have to scroll down to see the bottom of the image. Also, I think this is a bug with the theme– it had this behavior before I changed any CSS.
3. Your CSS fixed the height issue– but scrolling down still switches the style out to the default menu style– (and changes the background from having transparency to being solid black (the setting I have set for Enfold->General Styling->Header Background Color))
May 31, 2014 at 6:59 am #2727362. After more thinking, I think that shifting the image below the mobile menu is not smart– and I think that is the cause of this issue. After doing some debugging, it looks like the menu bar actually IS transparent, but behind it is a wrap_all with color #423d42, and so the header looks black. So the problem is just that the image is getting shifted down 63px when the mobile menu is being displayed. In DOM speak, the div#main’s top is too low. How to fix?
3. I was able to figure this out. I added: .header_color .header_bg {background-color:transparent}
May 31, 2014 at 6:21 pm #272803I’m not seeing, i tried making a comparison between mobile view / desktop view:
Best regards,
JosueJune 1, 2014 at 4:59 am #272918Hi Josue,
It’s already “fixed” on that page now because I had added this style:
@media only screen and (max-width: 767px) { .responsive #header.av_header_transparency + #main { top: -64px; position: relative; } }
This was tricky because I had to use the sibling css selector. I think something similar to this should be used to fix the theme out of box.
-
AuthorPosts
- The topic ‘Constant height always semi-transparent menu’ is closed to new replies.