Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Durdona Abdusamikovna
1,553 PointsHow can I possible change text style of the drop down menu ?
Hey,
I was playing around to change the size of the drop down menu and wrapped texts with <p> tag so I can target it with CSS and change its color however, it is not working. I could change its size and I would like to change font style of the drop down menu
<div id="menu">
<ul>
<li class="selected"><a href="index.html"><p>Home</p></a></li>
<li><a href="about.html"><p>About</p></a></li>
<li><a href="contact.html"><p>Contact</p></a></li>
<li><a href="support.html"><p>Support</p></a></li>
<li><a href="faqs.html"><p>FAQs</p></a></li>
<li><a href="event.html"><p>Events</p></a></li>
</ul>
</div>
Is it happening because of jQuery ?
10 Answers
Marcus Parsons
15,719 PointsOkay, I figured it out. I hadn't done this in a while. Your mobile menu with id "menu" is using a select element, so you need to target that select from within the media query:
@media (min-width: 320px) and (max-width: 568px) {
#menu ul {
display: none;
}
/* New selector */
#menu select {
/* Sample properties below
Delete these properties and add in your styling properties.
*/
padding: 30px;
font-size: 52px;
}
}
Marcus Parsons
15,719 PointsHey Durdona!
You should just go ahead and take out those p elements because they are likely to break the layout of your document. If you want to style the text, you should target the anchor elements within the menu. So you want to target the "#menu" and its child "ul" and then its child "li" and then the li's child "a".
I would get rid of the div personally, and just use the ul and add an id of "menu" to it.
But here is the CSS selector you should use as of right now (with the p elements removed):
#menu ul li a {
/* Add text styling here */
}
Durdona Abdusamikovna
1,553 PointsHey, I am putting a link please click below because I am targeting text inside the drop down menu http://postimg.org/image/4g6219ejz/
ellie adam
26,377 PointsHi Durdona, Few thing here... First you don't need p tags in list. second I don't see you css code and js code. I don't know which function you are using. For drop down menus we use js and jQuery. We add jQuery link and define the function in js file or in script tags on html.
:)
Durdona Abdusamikovna
1,553 Pointsellie adam Ok, I took them out :) Now please tell me how I can target the text inside the drop down menu :) I have added a link above
Marcus Parsons
15,719 PointsCan you please post a snapshot to your Workspace?
ellie adam
26,377 PointsIn css file use your styling code
menu ul li a {
font-size: ;
color: ;
font-family: ;
}
Durdona Abdusamikovna
1,553 PointsIt is not working I tried that already :)
Durdona Abdusamikovna
1,553 PointsI use sublime
Durdona Abdusamikovna
1,553 PointsAll is fine ... was missing one of the curly braces :) Thank you again Marcus Parsons You are just awesome :)
Marcus Parsons
15,719 PointsOh I know! :D haha jk! But thank you Durdona :P
ellie adam
26,377 Pointsit happens all the time.
Marcus Parsons
15,719 PointsCan you see your menu now, Ellie! And I hope so, too! lol
ellie adam
26,377 PointsI just refreshed the browser. lol
Marcus Parsons
15,719 PointsLOL! :P Don't you just love when it's something as simple as that? :D
ellie adam
26,377 Pointsyup!
Durdona Abdusamikovna
1,553 PointsDurdona Abdusamikovna
1,553 PointsMarcus, it breaks the layout see the link below please http://postimg.org/image/tx40mzbij/
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsYou will need to add some margins to those other elements in order to fix the layout. I.e. target the h1 so that it has a slight margin from the menu. You'll also need to play around with it and get it how you like it. This is where learning CSS comes into play. It's better for you to play with the code and fix it than for me to come up with another answer :P