I'm somewhat new to PHP and WordPress and I'm trying style a menu plugin (their support is busy) based on what page the user is on.
What I want is for the background and other styles to change if it isn't on the front page.
I've tested the CSS in inspect element so the selectors are correct, but I don't really know how to implement this in a clean and effective way.
The messy way would be to create another two menus (because top_navigation and main_menu are separate so 4 total) style those in their plugin settings and replace the two menus on the front page with two other ones when not on the front page using php. So if I need to make a change the menu's items I'd have to do it for two or four times which to me is stupid.
So far I've come up with creating a PHP variant of the style sheet and rewriting the URL to redirect from .css to .php however I don't really have a firm grasp on how I would do this from the root directory's .htaccess as the location of the two style sheets are far from it.
Location of style sheets:/wp-content/plugins/hmenu/_frontend_files/_menu_5/_css
Name of style sheets: hero_menu_styles.css
and hero_menu_styles.php
PHP Style sheet:
<?php
header('Content-type: text/css; charset: UTF-8');
?>
/* Normal CSS Here */
<?php
if(!is_front_page())
{
echo "#hmenu_load_5 .hmenu_main_holder {background-color: #67b7e1;}"
}
?>
.htaccess:
I am almost 100% sure there is something wrong with this.
I have no idea what though.
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase "/wp-content/plugins/hmenu/_frontend_files/_menu_5/_css/"
RewriteRule ^hero\_menu\_styles\.css$ hero\_menu\_styles\.php [L]
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
So I have a bunch of questions.
If you need to style a menu based solely on whether you are on the homepage or not. Then you can simply use CSS selectors based on what you need to change.
Target home page menu style:
body.home .menu-class {background: #333;}
Target menu on a page:
body.page .menu-class {background: #FFF;}
You can find more scenarios and their classes here: https://codex.wordpress.org/Function_Reference/body_class
Try this code.
echo "<style>
#hmenu_load_5 .hmenu_main_holder
{
background-color: #67b7e1;
}
</style>";