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.
Related
im brand new to coding and in a mad rush to get my website finished before i have to put it live in 4 days. im having serious issues with the menus on my site. i used a drag and drop editor to build it and am customizing small parts using the html element tool where i need to. The problem im having is that the editor as far as i can tell only uses one master css file for styling the menus... which means all my menus regardless on "in editor" settings have 15px padding around them. This is a huge issue for my footer which contains TONS of links. I need to find a way to apply css to only the menus in the footer. (there are a few coppies of the master page meaning theres actually a few footers, one for each master page)
sadly as im so new to code i dont really know what the hell it is im doing here.
but in short i just need to be able to make a little piece of css for my footer that i can apply that will only affect the menus in it and no where else
i dont want to paste the code in here as part of this question as i dont really kno what part to look for and what little i have looked into my code would be like 5 pages long or something. so please if you can help me just let me know what to look for or how to find it (im good at using the google chrome inspect tool) so i can paste only whats needed.
just in case it helps heres the current link to my website.
http://sites.simbla.com/fd066dd7-48f1-6002-53ae-f18c93075f27/careersart_art?misc=1475010324849
I suppose you don't have the options to add classes to your editor. Your footer does not use a footer tag, rather another instance of the div with class 'containerHolder'. What you could do (since the footer is the last instance of this class) is to use the css :last-child selector.
Your code would look like:
div.containerHolder:last-child li {
// css rules here
}
This will only target items inside of your footer. This is not the greatest method, but possibly the only one since you don't have control or knowledge of the markup itself. The above example would only target li's inside of your footer.
I'm not 100% on what you are wanting but you can select all the menu items by using #MP485 ul li as the selector or if you want the links #MP485 ul li a so if you want to edit the padding you can use something like this:
#MP485 ul li {
padding-bottom: 2px !important;
}
If you use !important at the end this should override any other styles.
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
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
I want to apply 3 tabs for a common way to partition lists.
How can I improve my view and also add the way a tab gets to the foreground like in the link? I could read the html / css from the link to learn how it swtiches between the three categories and looks more like tabs than my effort.
The difficulty for me is styling the tabs named "All", "Private", "Company". Could you help me? My website which uses a http get parameter f=c for company view and f=p for private view which correctly fetches the apprioriate subset but at the moment doesn't change the layout which it should to look more professional.
Update: The above looked terrible so I've styled it and I want also to add dynamics with a tabs URL parameter.
You're very close. Mark the active tab with a css class like <li class="active"> then assign that class a different background color (like white) and no bottom border. Then it will appear to merge in with the content beneath.
use jQueryUI tabs see demo here
easy to use, easy to style, all the functionality you could want :)
My company is starting to move toward adding the iPad as a browser i have to test my work on. This got me thinking...
Since touch-based clients don't have a :hover state are pure CSS dropdowns going to go away?
Then i thought even if you add some javascript to make the menus popup on click... What happens when the menu item (that expands to another menu) is also a link. How do you tell the difference between a click to see the menu or a click to go to that link?
What's going to happen with dropdown menus when touch based clients become more ubiquitous? Are there any workarounds out there yet?
Pure CSS dropdowns are possible on touch devices thanks to the :target pseudo-class. Basically, the pseudo-class is active for objects that have an id matching the current URL fragment. This means that the URI fragment can be used to store and share state with CSS. For example, let's say we're on http://example.com/, which has the following HTML and CSS:
<style>
#menu {
display: none;
}
#menu:target {
display: block;
}
</style>
Show the Menu!
<div id="menu"> ... </div>
The menu is hidden by default. Clicking or tapping the link will change the URL fragment to "menu" (full URI: http://example.com/#menu). Because now there is an element with an id equal to the URI fragment ("menu"), the :target pseudo-class applies, and the display property is changed.
Further reading:
Usage and Example at Mozilla Developers Network
Implementation of a touch-friendly pure CSS dropdown
This is kind of a design issue forced by a technical issue. I'd probably redesign/reorganize my content into one of three ways:
1- Click-activated mega-menus (example). The downfall here is that you might have real estate issues.
2- Top-Level Category links that lead to Navigation Pages. The downfall here is that it requires an extra page load to get to the content.
3- Make each Menu Item consist of two buttons, one to navigate to the page (the text) and one to expand the child menu (an arrow.) You'd still need, though, to provide the child navigation, if present, on the page the user goes to when they click a menu item.
my nav bar has this functionality (collins.class401.com/nav) for the crap you need
its a modified version of TJK_DropDownMenu http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/default.asp
their version (and mine) uses visibility for :hover
their version also only supports having <a>'s as menu items, while mine also supports <span>s (though using spans breaks their keyboard navigation) if you want something like a form, or a button in your menu, like i have
their version usually works for :hover on ipod touch, as long as you click in the 'white space'
my version is much more friendly to touch devices, and has the clickable arrows to toggle the display using prototype.js,
or, if they can't hover, and javascript is off, setting a php session and reloading the page, then inserting a style to the style tag at the end of the page which will overwrite the visibility and display according to whether the clicked to show or hide