i'm starting to learn, a bit on my own, to create a website. Now i have a problem i can't fix. I searched already on the internet but it doesn't work for me.
My navigation disappears when i hover. In some pages it only disappears when i hover my last link and other pages like this one: it disappears by the second link.
i'm starting to get a little hopeless to find a solution. That's why i ask for help!
Remove the html from your css/navigatie.css stylesheet
It is the last line and looks like the following.
/* we need to associate the JavaScript with our main ul*/
<ul id="nav">
You have random <tr> and <td> tags in your html that should be removed at lines 92, 93, 155 and 156 as there is no table declared.
Line 140 an <ol> looks like it was closed with </ul>
In the comments I mentioned that the spacing was your issue and you wanted clarification so here goes. Your navigation has nested lists, links, and images. For whatever reason they all have different heights. All I had to do to fix the problem was to make the nested li have a fixed height of 23px and the problem went away.
Honestly, I would redo the navigation. I can't see a good reason why you have a class called menu being applied to every ul and li in the navigation. It should be really easy to change the heights of the different elements but the way that the navigation is set up I think you're going to have a rough time.
Related
im brand new to coding and in a mad rush to get my website finished before i have to put it live in 4 days. im having serious issues with the menus on my site. i used a drag and drop editor to build it and am customizing small parts using the html element tool where i need to. The problem im having is that the editor as far as i can tell only uses one master css file for styling the menus... which means all my menus regardless on "in editor" settings have 15px padding around them. This is a huge issue for my footer which contains TONS of links. I need to find a way to apply css to only the menus in the footer. (there are a few coppies of the master page meaning theres actually a few footers, one for each master page)
sadly as im so new to code i dont really know what the hell it is im doing here.
but in short i just need to be able to make a little piece of css for my footer that i can apply that will only affect the menus in it and no where else
i dont want to paste the code in here as part of this question as i dont really kno what part to look for and what little i have looked into my code would be like 5 pages long or something. so please if you can help me just let me know what to look for or how to find it (im good at using the google chrome inspect tool) so i can paste only whats needed.
just in case it helps heres the current link to my website.
http://sites.simbla.com/fd066dd7-48f1-6002-53ae-f18c93075f27/careersart_art?misc=1475010324849
I suppose you don't have the options to add classes to your editor. Your footer does not use a footer tag, rather another instance of the div with class 'containerHolder'. What you could do (since the footer is the last instance of this class) is to use the css :last-child selector.
Your code would look like:
div.containerHolder:last-child li {
// css rules here
}
This will only target items inside of your footer. This is not the greatest method, but possibly the only one since you don't have control or knowledge of the markup itself. The above example would only target li's inside of your footer.
I'm not 100% on what you are wanting but you can select all the menu items by using #MP485 ul li as the selector or if you want the links #MP485 ul li a so if you want to edit the padding you can use something like this:
#MP485 ul li {
padding-bottom: 2px !important;
}
If you use !important at the end this should override any other styles.
My site is [manayunkfarm.org] (sorry, can't post more than 1 link), My issue is that if I add more than 4 pages to my menu navigation, the navigation "hamburger" icon slides into white space on all pages with a shorter header image. (Click around the site and use the drop down navigation and you should get an idea of what I'm talking about.
I've mocked up what I'd like for it to look like,
mockup of possible new navigation
I figure it should be fairly easy to adjust the with of each navigation box in half, then create 4 more boxes, doubling the number of pages I can link to, in the same amount of space. Does anyone know where I would have to go in my wordpress editor to edit this and how?
Thanks
Well, for starters, opening effect and the stacking of the menu items are being handled by some jquery/javascript somewhere.
What you can do is use String Locator to locate which part of the code is responsible for changing the css of the #nav element. Then, change the code according to your preference. But, if you are not used to scripting then this will be tough.
The way out, which is my suggestion is that, change the color of the menu button.
Change it from white to the pink color being used for the menu link hover : #DBBFBE
If you want to go ahead with thi suggestion then:
Go to Appearance -> Editor. Generally, the editor should open style.css which is the default stylesheet of your theme.
Search for : #nav-toggle
Change the color attribute to #DBBFBE from whatever it is, I think its #ffffff;
Thanks.
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I'm have a question about my site specifically.
These dashes seem to be appearing in between each roll over image. I've looked over the whole code (its pretty simple), and I can't seem to figure out where it is in the code and/or how to get rid of it.
Here's my site:
http://andiamlisa.com/
any help would be great - thanks
Add this to your CSS
#navigation a {text-decoration: none;}
It looks like there is some hidden spacing between elements on Navigation Anchors.
Thanks everyone for taking the time to read this.
I have styled my navigation bar and a few other things on my website using lists. For example...
<ul>
<li id="n1"></li>
<li id="n2"></li>
<li id="n3"></li>
<li id="n4"></li>
<li id="n5"></li>
<li id="n6"></li>
<li id="n7"></li>
</ul>
It works perfectly, but when it loads, it kind of like breathes. It starts off shrunken in a little bit, and then expands to its properly place after a second. I do not know what is causing this problem, and I don't think it's due to the way I styled the list, as I will show.
This is the website with the problem.
http://beaconrecords.com/
here is a test link that doesn't have the problem.
http://beaconrecords.com/wp-content/themes/br/test.php
I personally don't see this as being all that problematic, however, I feel that cutting up the 'lightning' spacers into two images is and it's likely that resolving that issue will also fix your other one. I would extend the images in each li to include a spacer (or even better, use the word image as a background for the links and use the spacer as a background for all but the last {or first} list item).
Right now the lightning bolts are not appearing correctly for me (in Chrome) and this would be a way to ensure that.
Test your site at Google PageSpeed: https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fbeaconrecords.com&mobile=false - maybe you find some thing you could improve. In my opinion your site i generally slow loading on my 1M connection.