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
Related
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!
I've created a layout with "Panels" to replace my frontpage and I have some doubts about how to populate the different panes. All my websites until now are "blog-like" websites with a typical "CMS-blog" look-like and I'm not sure what's the "Drupalish" way of solving some problems...
I'm trying to create a footer with the typical columns of links, just like the one that you can see in the bottom of "www.drupal.org". I've created 3 panes in my layout, in the footer, to "host" those links: left-link-pane, center-link-pane, right-link-pane.
My doubt is about how to populate those 3 panes with the links without creating HTML blocks...
In a youtube video I found somebody that created 3 custom full-html blocks with CSS + ul + li + a tags. That works, but It doesn't seem the right way of doing thinks in drupal.
What's the right way of doing this?
I had an idea but I'm not sure if it's the right way to do it, or if somebody could suggest me how to do it:
In my panel layout, create 3 panes to host those links (links_left, links_center, links_right)
Create a vocabulary with 3 terms (tags) named Links_left, Links_center, Links_right
Create a new content-type named "FooterLinks" with title, body, link_text, link_url and weight.
Create for each pane a View. Example: for the left pane, a view getting all FooterLinks tagged as "Link_left" and sorting them by their "weight", linking to "link_url".
Use CSS Injector or a custom CSS file in the theme to give style to the results.
Maybe the above is not even possible to do with views... maybe it has to be done with "Menu entries"?
P.S. I found a module to create footers from the primary and secondary menus, but I can't control output and I would like to know how to do it.
The Drupal way would be to use Menus.
Your best bet would be to use the Footer Sitemap module.
It lets you choose which menu(s) to put in the footer. And then which of the links in each to display.
So you could use a mix of your primary navigation and secondary navigation menus or create a new menu.
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.
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 have following navigation structure, which i want to implement in wordpress:
(Home / About / news / Contact) are in top navigation, whereas all sub links are in sidebar.
How can i create this type of navigation in wordpress. i.e. How can i display first level navigation in header and second level navigation in sidebar.
Follow these steps:
First create a main Navigation to your site without child pages and
add it to the theme.
Then create a new menu with child menus only and save it.
Now goto widgets section and from there drag Custom Menu from left
side and add to your sidebar.
Then select your child menu and click save.
Thats all. :)
Check this WordPress Codex section for creating menu tutorial
Cheers!!!
I found these plugins helpful:
Simple Section Navigation
http://wordpress.org/extend/plugins/simple-section-navigation/
It allowed me to create the side nav based on the hierarchy of the pages and their children.
I wanted a bit more control though because I didn't want some of the parents to have their own page ... just a heading for their children. So instead, I'm using this plugin (for the Genesis Framework).
Genesis Simple Sidebars
http://wordpress.org/extend/plugins/genesis-simple-sidebars/
This allows me to create as many sidebars as I want and add custom menus to those. I'm new to this, so maybe I'm taking a long route, but so far it seems to be doing what I want it to.