Responsive WordPress Theme Tutorial – Part 5 – Dropdown Navigation Menu
January 10th, 2013 by admin
We continue to work on our navigation menu. In this part we create a dropdown menu from the wp_nav_menu using only CSS. Check out the code and download the source files: www.awfulmedia.com Music by Dano at Danosongs.com What’s this series about? In this series we are going to create a custom WordPress theme from scratch. We will learn how to create WordPress themes, use advanced features such as: custom post types, custom fields and meta data. We will be focusing our theme on a site based on a site like Kongregate.com or Armorgames.com. Links ——— Skeleton: www.getskeleton.com WAMP: www.wampserver.com WordPress: www.wordpress.org Website: www.awfulmedia.com Twitter www.twitter.com
Written by - Visit WebsitePosted in Wordpress Tutorial Videos
January 10th, 2013 at 8:45 pm
I have created a lot of wordpress websites for me and for my clients and I know that WordPress configuration can be a huge hassle and most webmasters get it all wrong. So I decided to create a video training course. watch this new video: ==> /watch?v=XL2kQCl5PdI? <=== or click on my username to watch it
January 10th, 2013 at 8:45 pm
This is more of an advanced series compared to my other tutorials. I am trying to focus on the WordPress part of the website and not as much? on the HTML/CSS parts.
If you’re referring to the array we used, I tried to explain it a bit more in the next part, maybe that will help you a little bit.
If you have questions about any specifics, please ask – I’l try and clear it up for you. 🙂
Austin
January 10th, 2013 at 8:45 pm
Dear Austin,
So far I did all your tutorials and they are REALLY REALLY great. Thanks again for your hard work!
However I have to admit that in this series, I’m quiet lost. Very often I don’t understand WHY we are doing some things, and I feel that some more explanations about the reasons of doing things would be rly helpful.
It just doesn’t make enough sense and so I can’t really? learn everything (and reapply later for other purposes)
Just wanted to let you know
Thanks for your work again ! 🙂
January 10th, 2013 at 8:45 pm
Hi,just a question . How you get the arrow when there is a submenu? Thank you for your tuto, they ar really? helpfull.
January 10th, 2013 at 8:45 pm
Of course! I’ll send you? contact information.
January 10th, 2013 at 8:45 pm
Is there anyway I? could ask you questions directly? Or is that asking too much?
January 10th, 2013 at 8:45 pm
Thanks Chad! I’m glad you were? able to figure it out.
Austin
January 10th, 2013 at 8:45 pm
Loved this tut! Finally understand css? menu structure!
January 10th, 2013 at 8:45 pm
I figured it out. In Notepad++ go to “Settings -> Preferences -> Backup/AutoCompletion”. You can turn it on from there. Thanks? for the videos, im learning alot!
January 10th, 2013 at 8:45 pm
Hi Austin, how do you get Notepad++ to show tips as you type? For instance you type “n” and “nav” pops up as an option for auto entry.? Thanks.
January 10th, 2013 at 8:45 pm
I’m going to say I should be able to record? it today, but I’m also going to say it is possible something can happen. So, most likely today.
January 10th, 2013 at 8:45 pm
ok so instead of using the bg-color i used bg-image b.c i created a nab-bar on photoshop everything looks good except the first cat i when i make it round like its supposed to the? sub-cat for that cat is also round on one side and looks weird. im trying to figure out how to only select the first cat anchor and not the sub-menu anchors o_0
and when is your next video? your currently the best tut series on youtube/internet
January 10th, 2013 at 8:45 pm
I’m not able to double check at the moment, but what you should do is? apply the border-radius to the nav-bar class. The nav-bar class should be where we applied the background color to the main navigation bar and added the shadow.
I would assume you are applying your radius to the UL property and, depending on your selectors, would apply the radius to both the top-level and sub-level menu – so that will not work for what you’re trying to achieve.
So that’s .nav-bar { border-radius: 10px; }
January 10th, 2013 at 8:45 pm
ive given my borders a radius of 10px so the very first category’s top and? bottom left corners are rounded but when the drop down menu appears i get the same effect. i only want it to apply to that first category and not the sub categories. do you have any suggestions?
January 10th, 2013 at 8:45 pm
I try to cover and explain things in a way that I understood as I was learning. I know how it is to learn from online tutorials and I think that has helped me explain things in a way that other people, such as yourself, would understand.
Doing so though, I will leave things out here and there.? I am thankful for the questions as they help me get it straightened out.
January 10th, 2013 at 8:45 pm
you answered it in the video i wasnt sure why you used an array and why you chose those specific strings i was just connecting dots but now i understand. np for the fb. aside from my own site im consider building websites for others so understanding wp (like keywords, proper file directories, etc.) is? essential. alot of other tutorials never explain these things so when i go writing my own code it never talks to wp not realizing i need to use certain keywords/strings/names that wp recognizes
January 10th, 2013 at 8:45 pm
What question are you referring to, Jo? Sorry, I’m just answering so many questions now? I cannot remember. Was it a question I answered in the video?
Also, feedback is greatly appreciated as I will not be aware of needed improvements with it.
January 10th, 2013 at 8:45 pm
so glade that you answered that question because i had the same one. but i had to go to wp forums and other sites to find out. if you explained the keywords of wp and why you have to do things a certain way it makes it way more convenient then bouncing around for information and it will? help us understand wp. but just some feedback i know you were asking for some
January 10th, 2013 at 8:45 pm
With WP, theme developers have to do what we have done so far. We have accepted plugins and given them a place to call their code. Doing this leaves most of the compatibility issues to the plugin developer. There are a few plugins that? you will come across that require you to add a function here or place this snippet there, but that’s about it.
If you wish to learn specific functions, triggers, and more uses for arrays, I could not suggest looking through the WordPress (.) org Codex more.
January 10th, 2013 at 8:45 pm
Thanks! Great tutorials! I’m starting to understand now the relationship between html,css and WP php. There’s a lot more html & css in WP than I thought. Are there any resources that list the essential php calls that have to? go in a WP blog so it doesn’t break plugins etc? Where do you learn for instance you need to define certain arrays etc.? Thanks again!
January 10th, 2013 at 8:45 pm
thanks! this is just what i? needed, perfect 🙂
January 10th, 2013 at 8:45 pm
Well, I needed to smile? today. Thanks a ton, UsernameAttempt. 🙂
January 10th, 2013 at 8:45 pm
your tutorials are great!!!!!!!!
?
January 10th, 2013 at 8:45 pm
Hi, please keep doing the tutorials this way. These bits of rambling are what makes these tutorials so good, because we’re learning more about what’s going on under the hood, so ramble as much as you want and then some (you said you like it, I know I like it, and I may be wrong but I? think other people will like it too) So keep up the good work and set your inner rambler free! Subbed+1
January 10th, 2013 at 8:45 pm
I am not familiar with Derek, but I am glad I have been able to help you! 🙂 I will not be able to continue this series for a few days. I’ll be? able to pick up where we left off after I finish this project.
Thanks for the kind words,
Austin