I'm having problems with my nav bar menu when viewing in mobile. It seems that it was being covered with the contents upon scrolling. I wanted to set it to front. Please help me fix this.
My website link is here and please minimize it for mobile view. Refer to the image below for the problem reference.
Set a high z-index value on your nav bar.
#nxrmenu_bar { z-index: 9999; }
Related
Hi there i was wondering if anyone could help me ?
I have an issue with CSS navigation dropdown that i have previous implemented in to designs but for this design the dropdown menu appears and are sometimes able to hover over the links but then sometimes it takes 5+ tries before you are able to hover over the links again abit hit and miss.
I have provided a link to the menu and also my code below its possible ive missed something so simple but any help or advice would be greatly appreciated.
Link: Design / Menu
Code: CSS Code
Im unsure how to input the css code in to my post so i have linked above.
thanks in advance
Chris.
The problem is the space between the opener and the menu.
You can easily solve this removing the space (that is a margin) like this:
#nav ul {
margin-top: 0;
}
Or, if you want to mantain the space, replacing the margin with padding, like this:
#nav ul {
margin-top: 0;
padding-top: .6em;
}
The padding will allow the menu to stay open.
Hope it helps. Good luck.
So hey guys. I'm new to the site, but have a problem concerning my footer image positioning. I'm sure it's basic for all of you, but I've tried several methods that I came across online, and had no luck. In the end, I decided to ask around.
My issue is this. The CMS I use ( http://www.animerelief.com/ ) and/or ( http://www.anime-static.com/ ) - if you scroll down to the bottom of any page, you'll see that (in a 1080x1920 resolution) the footer aligns with the text properly, and in the center of the footer area. My problem is, in any resolution under that, the footer moves, and ends up out of place with the website.
How do I go about maintaining a single position for the footer image and/or text/links in it?
Thanks for your help!
Regards,
Simply add a min-width to the body that it's equal to your holder width.
body { min-width: 1087px; }
I'm using NextGEN Galleryview template Wordpress plugin.
When I load the page, it first loads a very tall, blank document. Some 3000px in height.
Then this disappears and it loads the carousel with the correct height/elements.
I'd like it not to double-load, although I've not been able to identify where and how it occurs. I've compared it to another NextGEN gallery template (which loads properly) and FireBug shows them to have identical scripts/images, CSS and loading times.
Found the problem.
In the galleryview.css file there is this crucial bit:
/* IMPORTANT - Change '#photos' to the ID of your
gallery list to prevent a flash of unstyled content */
#photos{ visibility: hidden; }
Not sure why the default ID in the JS file isn't used here.
There is no ID for the gallery list in the JS file anyway, only a class. Changing the code to:
#myGallery{ visibility: hidden; }
.galleryview { visibility: hidden; }
Eliminates the flash of unstyled content. #myGallery is the actual ID, and changing its visibility seems to make the page load faster with no side effects, so I'm not pushing my luck. Leaving as is.
Hope this helps others. It took two days to solve this issue.
My website at http://www.oblivionro.net isn't properly vertically-aligned when you click on a different link in the menu.
For example, if you go from the home page to the ventrilo page, you'll notice that the alignment of the website shifts to the right and down a bit. I know a fair bit about php, but I'm not that great when it comes to css and designing websites.
Anyone know what the problem might be? Thanks in advance.
Your link doesn't work for me, but I can guess what the problem is. To fix it, add:
html {
overflow-y: scroll
}
That will force the vertical scrollbar to always be visible, so there will no longer be a "shift" when you move between pages that do/do not have a vertical scrollbar.
For a current project I'm doing I'm using PHP includes for my nav bar to save time when making changes to it. The nav bar is composed of a CSS sprite, which currently caters for the default background image for the anchor tags and the a:hover states. In this case having the same nav bar included on every page via the PHP include obviously works fine as neither of these states need to be conditional to any of the pages.
However, what I want to be able to do is to have a different section of the sprite visible depending on what page the user is currently visiting - just to show them what page they are on.
Without doing a PHP include I could have a different ID or class for each page (i.e. "page1Current") and just change the CSS accordingly. However, using the PHP include method I can't seem to work out a way to get around this.
I'm guessing that, using a bit more PHP, it would be possible to use some sort of IF statement to get the page address and use that to conditionally alter the CSS accordingly. Unfortunately I'm a total PHP beginner so I can't quite get my head around it.
I've not posted any code as I'm just looking to get the right idea, but if it helps I can post some.
Any help would be appreciated :)
Rich
You don´t need more php, you can set a class or id to every page on the body tag and give all your links a separate class as well.
If for example the id of your contact page is contact and the class of the contact link in the navigation menu is contact you can style that button on just that page using:
#contact .contact {
// highlight button
}
Why not include some a style tag in the html rendered by the include that changes whatever css attribute you want for your bar, ie :
<style type="text/css">#menu .navbar { background-position: 0 0 }</style>
in include #1 and
<style type="text/css">#menu .navbar { background-position: 50px 0 }</style>
in include #2