I was wondering if anyone could tell me how I could implement icons into my navigation menu, can't find a proper tutorial for this. What I'm trying to is making something similar to this -
[1] http://i.imgur.com/Lp4aLyr.jpg?1 "navigation example (before hover and after)"
How can I put icons with text (or a complete image icon) instead of the normal li text ?
Appreciate it.
Here is a good tutorial for you.
http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
Related
I am learning web designing in self-study fashion. As a practice, I am using the WpF Medinova template freely availabe from here . My requirement is to include Arabic content and display it properly. I tried to change the CSS direction to rtl and float to right in the menu-area in the file style.css line 184. But it does not work. While the Home should appear first, it appears at the end as if it is in English webpage. See this screenshot:
The word with three dots underneath should appear exactly in the firt position.
I would appreciate if you show me how to change the navigation menu direction to appear from right to left.
Here is the solution how you convert LTR to RLT, just follow this link instruction, hope it will help..
https://codex.wordpress.org/Right-to-Left_Language_Support
I am making a floating button with bootstrap, which is supposed to look good. I have done the initial style editing, but now I would like to add hover effects to it. How can this be done?
This is the code I wrote: http://codepaste.net/oiszxo#
I would like to add on hover effects, but i do not know how to do that?
Any help or ideas would be great.
It depends on the what kind of hover effect you want. You can add a simple XXX:hover styling, just like what you have tried. There are plenty of hover effects, google it. Try this
My site is [manayunkfarm.org] (sorry, can't post more than 1 link), My issue is that if I add more than 4 pages to my menu navigation, the navigation "hamburger" icon slides into white space on all pages with a shorter header image. (Click around the site and use the drop down navigation and you should get an idea of what I'm talking about.
I've mocked up what I'd like for it to look like,
mockup of possible new navigation
I figure it should be fairly easy to adjust the with of each navigation box in half, then create 4 more boxes, doubling the number of pages I can link to, in the same amount of space. Does anyone know where I would have to go in my wordpress editor to edit this and how?
Thanks
Well, for starters, opening effect and the stacking of the menu items are being handled by some jquery/javascript somewhere.
What you can do is use String Locator to locate which part of the code is responsible for changing the css of the #nav element. Then, change the code according to your preference. But, if you are not used to scripting then this will be tough.
The way out, which is my suggestion is that, change the color of the menu button.
Change it from white to the pink color being used for the menu link hover : #DBBFBE
If you want to go ahead with thi suggestion then:
Go to Appearance -> Editor. Generally, the editor should open style.css which is the default stylesheet of your theme.
Search for : #nav-toggle
Change the color attribute to #DBBFBE from whatever it is, I think its #ffffff;
Thanks.
Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.
I've been customizing a Wordpress Theme (iconic-one) for an aquintance of mine. Everything is going according to plan, but I've ran into a problem.
I've modified the style of the navigation bar slightly, but one of the elements is not adjusting accordingly.
The problem is that when hovering over a child element of a dropdown, the parent element in the navigation bar goes back to the original color, which is blue.
Uploading the relevant code is an issue, as I have no idea what is causing the problem.
For reference: oefentherapievanuitdekern.nl is de website, you can see the problem occur on the main page.
Is there anyone who can point me in the right direction for a solution? Any help is greatly apreciated.
Kind regards,
Bik
as I can see, there are two diffrent Stylesheets overwriting each other, i am not that deep into Wordpress, but maybe in ur Theme u can define hover color and aktive color
AND maybe hover color for sub-menu?
otherwise u have to work with code :P