This is a wordpress website designed by a third party which I am doing some amendments to.
I'm trying to add a new menu item called 'news & events' which links to all posts categorised with that name. Problem is the css isn't styling the link as per the rest of the navigation links (font / speech bubble on rollover). I've added new lines of code to style.css but it's not picking up on the styling.
I did a test and added one of the existing links again to see how the css behaved, and that dropped out too. It seems like no matter what link I put in, the css styling won't apply to it.
Does anyone know why this is happening?
looks like you have each of the menu items getting assigned from its own style.
if you were to give it the class "nav-opinion" to the list item containing it this would work fine. what I would probably do is give a class to all of the side menu items instead of doing them each individually.
Solved it. In Wordpress there is a hidden menu for css classes. In there I added nav-opinion tk-museo-slab and now it works!
Related
I have a requirement to create a custom navigation bar to replace the existing on a WordPress site. I have decent at CSS but have never come across something like this.
I have found multiple ways to remove the existing navigation bar so that is not a problem but adding the svg with links that are relative to the svg is.
The navigation bar is supposed to look something like this
navigation bar
I think you can approach this from two different angles.
1 - You don't want to/can't use PHP
You can create a custom menu through Wordpress' admin panel.
Add specifics classes to buttons (by activating CSS class property field on menu's buttons using "screen options" panel : ont the right top corner of the page).
Then you sould need 2 classes :
one class for the links on the first row (who/what/how)
another class for the link on the second row (contact)
and adjust de CSS rules to display links as you want.
Finaly I would display the "cloud" svg as the background of the whole menu.
The real problem is that wordpress will output all menu items as li in a ul, so maybe you should create 2 differents menu (one per row), and display the two menus in a dedicated container.
2 - You want/can/prefer to use PHP
This alternative takes advantage of Wordpress' Menu Walker by creating a custom walker extending it
The idea is that by customizing this PHP class you can specify how you want wordpress to render you menu(s) by defining the HTML output.
Here is some links to help you do that :
https://gist.github.com/kosinix/5544535
https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401
http://jamescollings.co.uk/blog/wordpress-custom-walker-output-section-of-menu/
Once you custom menu output is OK, you just need to customize the generated HTML though CSS.
Note: the second approach can be an adventure if you're not comfortable enough with PHP
I am a CSS noob and I created a carousel using jCarousel. It works like it should as a page and with tabbed menus. The problem is the theme adds CSS to it when I go to /admin/config/system/site-information and make the view the default front page. It adds list bullets over each carousel item and changes the displayed item location.
I want to remove these bullets from the view but not the entire site. The development site can be seen at http://delphos.lib.oh.us/NewSite/
If you click on one of the "tabs" (red boxed buttons) the display problem goes away.
Any help would be appreciated.
TBG
Try looking for this line:
.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before {}
You can remove the whole line, or just remove the content attribute. Either should work.
I want to display image and link in sub menu, i tried menu icon module, but i can not able to display both image and link.
can any one know which module support both?
i found one drupal website which uses the same, sweetdigital.co
I have done this before by overriding theme_menu_link to add a wrapper and a unique id, then just used css to add the image using the unique id as the selector.
In my WordPress menu I want different images for different menus with text as well. Here is the image reference. I want my menu should be like this.I am using WordPress 3.4.2. Any help and suggestions are highly appreciable.
Update
The screen options image
Here are two ways on how you could add custom classes to your menu items, so that you could style them with CSS.
When on the Appearance > Menus page in Wordpress admin panel, click on Screen
Options at the top-right of the page. A slide-out menu appears and
allows you to check an option labeled CSS Classes. If you enable
this option, you will be able to add a custom class to each menu
item, the same way as you add its title.
You can customize the Walker class to add an incremental class name
to each (top-level) element. To see how the Walker class works,
please take a look at the following article:
http://wp.tutsplus.com/tutorials/creative-coding/understanding-the-walker-class/
Use image sprites
Use a different class for each of your <li> item
Position your images as background for that classes.
I'm currently working on a Wordpress website with an custom jQuery menu. And everything is working fine except for one thing. I want to add a active class to an menu item that corosponds with the current page.
So basicly when the viewer is on the page "catering" I want the catering menu button the have an different style then the rest. But because it's wordpress I can't put in the html so I guess it has to be done with PHP but that's really not my thing.
So I was wondering if any of you could point me in the right direction. Here is the link to the website http://no-illusions.nl/projecten/kokaanhuis/wordpress/# no pages are currently working but when you hover over a button a brown layer appears, I want that layer to be static (when it's down) on the current home page but can´t figure out the best way to do it.
Use wp_nav_menu (http://codex.wordpress.org/Function_Reference/wp_nav_menu). It attaches a current-menu-item class, as well as a few other useful classes (current-menu-ancestor, etc) for styling. Plus you'll also be able to easily edit the menu with the menu admin page.