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;
}
Related
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
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 am trying to create a horizontal menu, just like the one in my main menu position (in fact I want it to look identical). I have setup a menu module in the position I would like and added the class-suffix that applies to my main menu. The first 'level' of the menu displays correctly, however, the dropdown box submenu items are covered by the modules below so I cannot see or choose the items. I just want a menu that looks identical to my mainmenu in another position. Is there an easy way to do this? Do I need to change how the position 'styles' menus and if so, where do I do this (css files, php files)?
Thanks.
The problem sounds like you have a z-index issue with the modules below the menu. Depending on the position of the code and the CSS you will need to make some changes to put the menu module above the items that are covering the dropdown menu.
If you want a specific answer then you need to give us a link to the page.
I would like to hack headway theme by adding an option to pages to append custom "classes" for that particular page. It's similar to your regular page where you have an option to select page template. but instead of selecting page template user would just have to select the class he/she wanted to append on the page. that class will have a CSS overide.
Example:
HTML
<body class=" red ...other headway css classes..." ">
CSS
body.red #container { background: red }
body.green #container { background: green }
I want to add a custom dropdown that list some classes option for theme to choose. example item on the dropdown. "red theme", "blue theme". This can also be done using Custom field but prefred to use dropdown so user won't get it wrong.
Append the class that was selected on the page to the tag of that page. I tried using "body_class" on my functions.php But It totally erased all the classes causing my page to break appart. What I wanted to do is just append the custom class instead of erasing the entire classes of the body.
Please advice. thanks!
Headway already has a custom meta box for custom classes on a page, so maybe you could either:
hack that to display a drop down
create some sort of meta box that will save a selection from a drop down to the same field that Headway writes to, if that's possible, and just remove/hide the Headway meta box from the admin
add an informational box on the page screen that displays the available classes and just use the Headway meta box instead (upgrade safe, best approach to keep things clean)
I'd like to move the menu separator (look here) currently just after (to the right) of the menu item "Sometitle" to just before (to the left) it, making a separator just after the menu item "Donate" and just before the menu item "Sometitle". Is this accomplishable via the Joomla software,and if so how do I go about doing it, or do I have to accomplish this myself (via JavaScript/CSS). If it's only doable via JavaScript/CSS,any tips would be appreciated.
Thanks!
Is 'Some Title' a specific module or is part of the menu? I would make a second menu module for that item and instead of applying that margin you can put 'float:right' to the module div so you don't waste all that space.
Maybe you can make a 'dummy' menu item before 'Some Title'. Make it invisible with css so it shows only the separator. That's one option, I should take a look at the actual css code and html layout to give you more ideas. But definitely you can solve this with css.
Joomla way:
Create another menu for that item (and remove it from the left menu), use the same style for the <li> items in both menus (of course, place each <ul> according to your design).
CSS way:
Set the 'Sometitle' item like this (replace the X for the right item id):
.menuClass .itemX {background-position-x:0%;}
JS way:
Set the css properties as above.