Background CSS issue and MENU Hyperlink

Question

I used a wordpress template to start off my journey. I cant turn back now on the template due to time. I am very aware that Wordpress is a simple tool to use and I do understand that it's not ideal in most cases.

I created this website www.robbenislandfence.com but am challenged with the following 2 concerns. If one hovers over MY ORDER and NOTIFY ME SERVICE, a "text anchor" icon appears. Does NOT look good at all, It should trigger the hand icon as seen on the above links. What can I do to get the hand to show up on these 2 menu items of the menu?

The second question I have is, I want to go into the background.css doc and remove the large image (bridge.jpg - which actually is the image of the fence) and just replace it with a color.

Can I just simply replace the bridge.css script below:

#page {
 background: url(../../images/background/bridge/bridge.jpg) 50% 50% no-repeat fixed;
 background: 
 url(../../images/background/texture/tv_70.png) 0 0 repeat fixed,
 url(../../images/background/bridge/bridge.jpg) 50% 50% no-repeat fixed,
 #9fbfa8;
 background-size: auto, cover;
 }

 @media (max-device-width: 1024px)  {

 #page {
 background-image: none; 
 background-color: #9fbfa8;
 }

 }

with this following one below:

#page { background: #1a1a1a; }

Will it mess up the website if I delete the entire first css script above and replace everything with this 1 liner of script?

#page { background: #1a1a1a; }

(I just want a charcoal bkg color to show up, not the fence background image seen on the site. I think it's causing problems with the speed of the pages on the site)

The website seems slow and I think it has to do with the 3 background images duplicated as seen in the css script above. I am not sure. Each background image is around 280-350kb so it all adds up. It's very important that there is hardly a delay on the download time of the webpages.

Answer 1

use the css "cursor" property to change the cursor on a hovered element:

cursor: pointer;

will give you the hand ( http://www.w3schools.com/cssref/pr_class_cursor.asp )

As for the second part of your question, yes, replacing that code with the hex color code should do the trick.

Answer 2

1. Why is it when I hover over MY ORDER and NOTIFY ME SERVICE the text cursor appears instead of the pointer.

This is simply because those two are not actually links. Because of this, the default text cursor is used. I wouldn't recommend using a pointer as that indicates those can be clicked, when in your case they cannot (again, they are not links). This may confuse users who are familiar with that cursor appearing on click-able elements.

You can change the default cursor by applying a class to the following:

In /wp-content/themes/yoo_showroom_wp-1/css/menus.css on Line 36, look for and add cursor: pointer;

.menu-dropdown a.level1, .menu-dropdown span.level1 {
    font-size: 18px;
    cursor: pointer;
}

2. Can I just simply replace the bridge.css script with a background color definition.

Yes. This will not have any negative impacts. The changes you've outlined should work if done correctly.

Answer 3

For the menu hover:

in class:

.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span

add

cursor: pointer

(menus.css line 39)

and for the background image, yes, what you suggested will work fine.

Answer 4

on hover for the item simply use the css attribute for cursor known as "pointer". Applying this css attribute to elements will add "the hand"

 a:hover {
    cursor: pointer;
 }

For the background, the code you have looks correct. Test it out. Images usually are the culprit when it comes to a slow website. In photoshop there is a "save for web" option that will help you out.

to comment out css code:

#page {
     background: url(someImage);
}

Same code commented out:

/**
 #page {
     background: url(someImage);
}
**/