Adelle Theme – change colour of Text in Menu

foodiesdigestblog · Member · Apr 11, 2015 at 8:59 am
Copy link

Add topic to favorites
hello.
i have been messing around with this of the last week …
basically i cannot figure out how to change the Text colour in the responsive menu

desktop mode i wish to leave the text white … however for the mobile menu i wish to change the text colour as i have removed the Black Menu bars and have made them transparent.

i have used nearly all of the navigation classes and have had no luck …
it may be possible that one of my existing CSS commands is stopping this from working … but i have no idea …

please help, this is the last thing i have to do in regards to customising this CSS
thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 11, 2015 at 6:15 pm
Copy link
Hi there, due to the way the navigation is designed in Adelle, you will have to use a Media Query set for 750px and narrower like this.
```
@media screen and (max-width: 750px) {
	.navigation-main a {
		color: #000;
	}
}
```
foodiesdigestblog · Member · Apr 11, 2015 at 11:04 pm
Copy link
not working, no idea why … this is the coding i am using for the small responsive menu.

/* Hide Widgets in mobile mode and re scales widget bar */

@media screen and (max-width: 750px) {
#image-2 {
display: none;}
#search-2 {
display: none;}
.site-main .widget-area {
float: right;
margin: 0 2% 1.875em 0;
width: 100%;}
}

/* Small menu */
@media screen and (max-width: 750px) {

.menu-toggle,

.main-small-navigation ul.nav-menu.toggled-on {
display: block;
text-align: left;
background-color: rgba (0, 0, 0, 0);
color: rgb(0, 0, 0);
border-left-color: rgba (0, 0, 0, 0);
}

.navigation-main a {
color: #000;
}

/*hides black bar from mobile menu*/
.navigation-main {
width: 0%;}

/*pushes menu text off screen and replaces with image and boundry box*/
h1.menu-toggle
{ border: 2px solid black;
border-radius: 10px;
height: 30px;
width:30px;
background:URL(“https://foodiesdigestblog.files.wordpress.com/2015/04/facebook-64.png”);
text-indent: -9999px

}

/*dropdown menu formatting*/
.main-small-navigation ul {
text-align: left;
border-left-color: #000000;
padding-bottom: 5px;

border-left-style: solid;
border-left-width: 1px;
}

#menu-item-549 {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
#menu-item-550 {
border-bottom: 1px solid #000000;
}
#menu-item-551 {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
#menu-item-669 {
border-bottom: 1px solid #000000;
}

#menu-item-671 {
border-bottom: 1px solid #000000;
}

#menu-item-670 {
border-bottom: 1px solid #000000;
}

}

its really weird … no matter what values i call up it won’t change the menu text …
foodiesdigestblog · Member · Apr 12, 2015 at 12:17 am
Copy link
should have put that in block text … sorry
foodiesdigestblog · Member · Apr 13, 2015 at 12:15 am
Copy link
fixed ….. FINALLY :)
one small thing … no big deal really … do you know what value i would use to bring the main content closer to the menu?

here is the code that seemed to work
/* Small menu */
@media screen and (max-width: 750px) {
.main-small-navigation ul.nav-menu.toggled-on {
display: block;
text-align: left;
background-color: rgba (0, 0, 0, 0);
color: rgb(0, 0, 0);
border-left-color: rgba (0, 0, 0, 0);
}

.main-small-navigation ul li a {
color: #888888;
font-size: 1.3rem;}
thesacredpath · Member · Apr 13, 2015 at 8:16 pm
Copy link
There is some top margin on the .site-main div when below 750px in width. Do a max-width: 750px media query with the following and adjust the value as desired like this.
```
@media screen and (max-width: 750px) {
.site-main {
    margin-top: 2.5em;
}
}
```
foodiesdigestblog · Member · Apr 18, 2015 at 5:31 am
Copy link
awesome
thank you
thesacredpath · Member · Apr 18, 2015 at 4:29 pm
Copy link
You are welcome.
kemffashion · Member · May 2, 2015 at 5:58 pm
Copy link
How can i use it?
staff-totoro · Staff · May 2, 2015 at 8:02 pm
Copy link
Hi @kemffashion

Can you ask your question by starting a new thread? Thanks!

No items found.