Change color mobile menu

arcticpercussion · Member · Sep 3, 2014 at 10:06 pm
Copy link

Add topic to favorites
Is it possible to change color from blue to white in the top menu/search in the mobile version? With black text.

Thanks :)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 4, 2014 at 4:05 pm
Copy link
On the mobile theme, add the following to change the color of the blue menu band. Adjust the color as desired.
```
.mobile-theme .menu-search {
    background: #cc0000;
}
```
If you also want to change the color of the search area, add the following and adjust the color as desired.
```
.mobile-theme .search-form #s {
    background: #65cc00;
}
```
arcticpercussion · Member · Sep 4, 2014 at 9:55 pm
Copy link
Thank you! this works great!
The only problem with the white background is that I cant se the text: menu, because its also white :)
arcticpercussion · Member · Sep 4, 2014 at 10:47 pm
Copy link
And there isnt a way to also change the blue text in the menu and the blue text(like continue reading, date and leave reply bubble) in the mobile page to grey or black.

There is also a blue line between menu and search at the top, even if I changed color, doesnt bother me too much but if its possible…

Thank you so much!

Kind regards
thesacredpath · Member · Sep 5, 2014 at 7:28 pm
Copy link
You can change the color of the “Menu” toggle text at the top with the following.
```
.mobile-theme #access .menu-toggle {
    color: #cc0000;
}
```
To change the blue text on the menu (once opened, add the following. The first is the non-hover color and the second controls the color of the menu items when hovered.
```
.mobile-theme #access a {
    color: #cc0000;
}
.mobile-theme #access a:hover {
    color: #65cc00;
}
```
On the links within the content area, the following two will let you change those colors.
```
.mobile-theme .entry-content a {
    color: #cc6700;
}
.mobile-theme .entry-date a {
    color: #cc6700;
}
```
You can change the color of that border line by adding a border-color declaration to the previous search-form #s rule I gave you so it looks like this. Edit the color codes as desired.
```
.mobile-theme .search-form #s {
    background: none repeat scroll 0 0 #181818;
    border-color: #cc0000;
}
```
arcticpercussion · Member · Sep 5, 2014 at 9:13 pm
Copy link
Thank you so much! This is great! :)

Only one blue line I would like to remove just under the menu search top thing.
Is it possible also?

Kind regards
arcticpercussion · Member · Sep 5, 2014 at 9:19 pm
Copy link
And the text I write in the search area looks like white, cant see it very well, is it possible to change that color?

Kind regards
arcticpercussion · Member · Sep 5, 2014 at 9:44 pm
Copy link
And is it also possible to change the blue color when I press the headline in a post?
thesacredpath · Member · Sep 5, 2014 at 10:33 pm
Copy link
On the search box, add a color declaration to the .mobile-theme .search-form #s rule like this.
```
.mobile-theme .search-form #s {
    background: none repeat scroll 0 0 #181818;
    border-color: #cc0000;
    color: #cc0000;
}
```
For the post titles, add the following and adjust.
```
.mobile-theme .entry-title a:hover {
    color: #cc0000;
}
```
arcticpercussion · Member · Sep 6, 2014 at 12:17 am
Copy link
Thanks! And the line under the menu/search is it blue or does it just looks like…
thesacredpath · Member · Sep 6, 2014 at 4:20 am
Copy link
Ah sorry, I forgot that one. It is an inset box shadow with a RGB color with an alpha opacity. The first three numbers in the () are the RGB colors and the last, the 0.8, is the opacity. The closer to 1, the more opaque. You can adjust that color, or if you wish to get rid of it entirely, just make box-shadow none.
```
.menu-search {
    background: none repeat scroll 0 0 #1e8cbe;
    box-shadow: 0 -1px 0 rgba(0, 86, 132, 0.8) inset, 0 1px
}
```
You can read more on all the other values in the box-shadow declaration here.
arcticpercussion · Member · Sep 6, 2014 at 9:31 am
Copy link
Thanks great :)
Alright just a couple of things and Im completely done.

1 My search area turned black and I cant figure out how to change it back.

2 Would it be possible to change the color even on the “bubble” next to the text: leave a reply?

3 In my iphone 5c I cant see the top picture like in the ipad version, but Ive been told that people can see it in a samsung phone. Something to do with apple? I have tryed different browsers.

Is it possible to shrink/make the top photo look slimmer also in the ipad and desktop version. Like the pandaemonium blogg.

Thanks you for great help!
arcticpercussion · Member · Sep 6, 2014 at 10:21 am
Copy link
Im starting to think maybe better to drop the top picture in all cell phone devices. Kind of like it simple…
thesacredpath · Member · Sep 8, 2014 at 2:43 am
Copy link
@arcticpercussion, you have the following two rules in your CSS. Combine these into one and delete the other.
```
.mobile-theme .search-form #s {
    background: #fff;
}
.mobile-theme .search-form #s {
    background: #000;
    border-color: #f5f5f5;
    color: #f5f5f5;
}
```
Fore the comment bubble, add the following to your CSS and edit the color as desire.
```
.entry-meta .comments-link a:before {
color: #cc0000 !important;
}
```
I’m assuming 3 and the last request are no longer in need of attention since you are dropping the top pic, is that true?
arcticpercussion · Member · Sep 8, 2014 at 5:48 pm
Copy link
Thank you so much Im very happy now, I just want it to look the same on all cellphones; without any top picture, like in my iphone, dont know if you can do anything or if you have a samsung s4 or similar to check with.

Kind regard
arcticpercussion · Member · Sep 8, 2014 at 5:52 pm
Copy link
And if there is anything to do with the problem when I have 3 or 6 posts the screen dont adjust very well after changing from horisontal to veritcal view. Seems like I always need to have 4 or 7 posts and so on, then its not a problem….
arcticpercussion · Member · Sep 8, 2014 at 6:13 pm
Copy link
Ok, always something new, is it possible to remove that its possible to comment on the pages in the menu in the mobile version, but still possible to coment posts, and how to change the blue color when I press: leave a reply

Kind regards
arcticpercussion · Member · Sep 8, 2014 at 6:16 pm
Copy link
And actually remove the possibility to comment on the Pages in the menu in the ipad and desktop version also, but still possible to comment posts.
thesacredpath · Member · Sep 9, 2014 at 3:36 am
Copy link
You can turn comments off on pages from within the page editor. Open the pages, click on “screen options” at top right and select “Comments” and then scroll down below the text area and you will find the comments module where you can deselect to allow comments and trackbacks. Then update the page.
arcticpercussion · Member · Sep 9, 2014 at 3:04 pm
Copy link
Thats strange when I select I cant see any module, just ad a coment. I uploaded the screen picture to my media library.
I had also some other questions, dont know if you saw them :)

Kind regards

No items found.