Customising my site

livlev · Member · Mar 25, 2015 at 5:05 pm
Copy link
Hello again,

1) Re point 1. Not quite- I want everything to stay as it is apart from when on the current page I would like the menu item to be the underlined image in black (this may have to be grayscaled). At the moment the current page menu item is the plain ‘portfolio’ image with no underline.

The other two points worked. Woohoooo! Thanks!
livlev · Member · Mar 25, 2015 at 7:15 pm
Copy link
Hi, sorry one more thing in addition to my question above-

2) On my mobile page, i’d like to remove the ‘menu’ button and just have the two pages ‘portfolio’ and ‘about me’. How do I do this, and also lift them up so they fit inside the circle of my header?
I’d like to remove the pink overflow too.

Please can you also answer my post above. Thanks alot :-)

Olivia
thesacredpath · Member · Mar 25, 2015 at 9:26 pm
Copy link
I want everything to stay as it is apart from when on the current page I would like the menu item to be the underlined image

Ah, you are going to have to add a couple of rules to the 800px media rule. This is an example for the portfolio page. Do the same, with menu item 321 with the appropriate URLs.
```
#menu-item-320.current-menu-item {
    background: url(URL_OF_IMAGE') no-repeat scroll center top transparent;
}
```
On the menu, I have tried several things to make the full menu stay active, instead of switching to the mobile touch menu, but I was unsuccessful. It may be that it isn’t possible due to the structure of the CSS and HTML in Spun.
livlev · Member · Mar 26, 2015 at 3:54 pm
Copy link
1) Thanks for passing on the code above. It works! But…
now when I hover over the menu item of the current page it doesn’t change. It only changes when hovering over the page I am not currently on. How do I get it to change to the green underline, even if i am already on the page?

2) Since I used the code when on the about me page the ‘about me’ menu item has floated upwards. Why is this? How do I keep it aligned with ‘portfolio’ at all times?

3) Thank you for looking in to the full menu thing for me. Is is still possible to remove the pink over flow and lift the menu items into the top section of the header?

Thanks again,

Olivia
thesacredpath · Member · Mar 27, 2015 at 8:09 pm
Copy link
It looks like your gotten #1 figured out.

On #2, first off you have two #menu-item 320 rules. Delete the first one in the 800px rule and then go through and make sure that all of the URLs in all the menu background declarations are set to center center. Also, on all of the menu item stuff, make sure that the heights (where there is one) are all set to the same. Since the images are all 84px in height, set the heights all to 84px. This may result in some misalignment, or a different misalignment, but let’s get things consistent first of all so we aren’t fighting ourselves.

On #3, that is a site header image rule you have in the max-width: 600px rule in your CSS. Remove this to get rid of the pink.
```
.site-header {
    background: url("https://livlev.files.wordpress.com/2015/03/possible-header-trying-option-2.jpg") no-repeat scroll 0 0 transparent;
    opacity: 1;
}
```

1 2

The topic ‘Customising my site’ is closed to new replies.

WordPress.com forums

Customising my site