We set up a template for Wordpress.
However the submenus that require the dropdown to appear by: Hover are not working normally. They remain there already statically exposed under their menu item.
We did the styling of this specific submenu item and it went all normal.
Remebering that every new item has a new class, ex.: "item-02", "item-03" ...
However if another new submenu is needed, we will have to do the styling again individually.
Where should I work on the code, to configure that every new submenu item should have that styling and positioning already done?
I think it's not just a CSS issue, am I right?
This is CSS. You should set the css in your styles.css file
Related
I am new to wordpress and I want to get the same layout as sidebar template for my menu that I have added to my page. Below is the image of the sidebar template.
I want the blue color line effect at the top of the sidebar on my other menu sidebar that I have created. Below is the screenshot of the menu that I have added as a sidebar.
Can someone tell me how can this be achieved? Thanks in advance
If you can't achieve it with your plugins or your theme then you will have to do it by adding CSS.
To do this you still need a little knowledge in HTML and CSS.
If you want to fix it quickly the simplest way would be:
Inspect element (sidebar with blue line) with your browser
Find the CSS styles that you need
Create a CSS class and add the styles to it (in styles.css or (if your theme has one) in the custom css field)
Add this class to the sidebar (with a plugin like: https://wordpress.org/plugins/widget-css-classes/)
Situation: I have old site Agroteplica based on Joomla 2.5. I need to add custom html-code to menu items (for example, icons, or bold). I need unic icon for each menu item, so it's no use to edit php-template of page.
If I try to use html-code in menu item header - Joomla clear it, only text remains. I tried to find some manuals, and added line filter="raw" to file modules.xml:
<field name="title" type="text"
description="COM_MODULES_FIELD_TITLE_DESC"
label="JGLOBAL_TITLE"
maxlength="100"
required="true"
filter="raw"
size="35"
/>
But it didn't give any effect either.
Question: what I need to do to make it work? :)
Here is what Joomla provides for cases like this:
In Menu Manager -> Menu Item Edit
Editing each menu item, you will see the "Link Type Options" section at the right column.
See screenshot:
As you see in the screenshot, this group of settings contains the follow options:
Link Title Attribute : You can add your custom Title attr to the menu item's a tag.
Link CSS Style : You can add a custom css class for this menu item's a tag.
Link Image : You can add a custom image for this menu item.
Add Menu Title : If you add an image, you can choose to hide the Title of the link (setting = No), or choose to show both Image and the title (setting = yes (default)).
For you case, you can either choose you custom images-icons that should be displayed next to your menu items title. If you want bolds or other styling options, you can add your custom css rules to the items you want, and then add your css styles at your template's css.
For example you have decided that for some of your menu-items you would want their text in bold. Then you could do as follow:
1 .Give them a css class to all of them, in the Link CSS Style field: e.g. 'bold-items' (without the '').
2. Open your template's css file with a plain text editor and add the following rule at the end of the document:
.bold-items {
font-weight:bold;
}
Notice: The above settings might have no effect at all, if you are using a 3rd party menu module, or your template contains overrides for the default menu module. In such case you will need to add further template overrides for the menu module in use, in order to implement the above settings.
*Not sure what you mean with menu item header and how you did try to add html-code to it.
*Update / Answer to your comment:
You never mentioned about video in your question. You asked about adding icons and making text bold. What do you mean with headers and what kind of code and where are you trying to insert it? Are you aware of what is involved in the process from the moment you create menu items in the menu manager till you see those in the front-end of your website?
Following my answer above and assuming you have basic knowledge of the workflow (menu module, template overrides, css) you will be able to add images/icons or custom styles for each menu item. If you want to have video inside your menu, then you...
... will need a more sophisticated menu module. These are called Mega Menus and allow the user to display various types of content inside their menus, like modules, in various ways. You should either install a such module or create one on your own.
I've been struggling with this for a couple of days now and can't think anymore.
I've created a template for a particular page for event menus and within that page I have a sub menu. This sub menu has event menus. For the purposes of example: Item 1, Item 2 and Item 3
These menu items are their own pages.
The submenu should open the pages in this template. Page layout example below:
Header
Main Nav
Banner Image
Content for Events
Event Menus (Item 1 | Item 2 | Item 3)
Menu Content
Footer
Menu Content switches out by clicking on the menu items, but the Content for Events stays static.
I currently have it working by adding a $_GET variable to the end of the links, but I've hard coded the menu. I don't want this because then the client can't make their own menu changes and edit their menus. (The amount of changes so far has been ridiculous.)
I've put the Event Menus and Menu Content into another nested loop, theoretically so it reacts inside the loop, though initial tests with this have failed.
I'd really like to keep the dynamic nature of Wordpress' menu system, but can't get this to work without hard coding.
At this point I'd be happy with direction on where to research.
Thanks.
If your HTML for the menu content is not too unwieldy, you could potentially drop each menu into a Wordpress Page, where the client could edit it. Simply create a Wordpress page for each menu, drop in your menu content, save it, and make a note of the Page's ID number.
Then, in your template, you can pull in the menu content by getting the Page with something like this:
<?php
// Menu One is content in Page ID # 14
$menu_one = get_post(14);
echo apply_filters('the_content', $menu_one->post_content);
?>
For your reference, get_post on Wordpress Codex: http://codex.wordpress.org/Function_Reference/get_post
On your actual page, what you could do instead of using a GET to grab each menu, is just go ahead and load all 3 menus on page load. Using CSS, you can hide the two you don't want at first and just show the default one. Then using some JavaScript events on the menu item links, you can show the clicked-on menu and hide the other two.
I've put a few notches in my oop and WP programming since asking this question. I think the better way to do this is a custom post type and change the wp_query object with parameters based on the link which can probably just be controlled by post ID. But it would still allow for a menu to be added to the "archive" page that controls the posts. Ultimately allowing client control of the menu, but still having a dynamic ability.
I have a Joomla-Based website and as far as I know, the only way to define the first site is to set it in the main menu.
For design reasons, I dont want a "Home" button in my main menu.
I need a way to hide it, or an other way to define my homepage.
From Joomla, I get a ul with li elements for each menu point. I would need a way to remove the first element (best via php on server side).
On my opinion js is not an option, just because you would mention it when an element disappears from the menu....
Any suggestions?
You don't have to use CSS to do it, particularly since any changes can mess up the menu item that is being hidden. All you need to do is create a new menu specifically for hidden menu items. You will need menu items for all kinds of stuff - clean URLs for a specific page, controlling modules on a specific page or section/category, or even for page specific CSS. If you don't want all those menu items displaying anywhere you put it in the hidden menu item menu. You don't have to publish the menu in any module so it will never show on the page, but the links and relationships created by the menu items still work.
You could use CSS and the first-child selector to remove the first menu item:
ul#nav li:first-child {
display: none;
}
I'm editing a WordPress theme named "Nova", and I'm relatively new to editing PHP.
Currently, the template uses drop-down menus for parent-child pages.
I would like to change that so rather than a drop down menu, there's just columns, with the top row being the parent page, and the rows directly beneath being the child pages.
How would I accomplish this? Thank you! ^_^
The markup is already there, it's just a matter of changing the stylesheet to change the appearance. You don't have to edit any code. Essentially, float the parents so they're next to each other, don't float the children so they appear vertically as a list does by default.