Change CSS style according to URL - php

I have looked everywhere, but couldn't found a simple solution.
CSS would be best.
Basically I want to change the link css style according to the URL.
So, let's say, there are three menu items:
HOME (https://www.example.com)
PRODUCTS (https://www.example.com/products)
SERVICES (https://www.example.com/services)
I want that, when a visitor is ON https://www.example.com, the HOME link would be Blue.
All other - black.
When on /products, then PRODUCTS would be in blue and all others (HOME and SERVICES) in black.
Example below:
Any kind of help would be appreciated.
Thanks.
P.S. not on hover, but when a visitor is on the specific URL.

You should use Wordpress' menu system.
In that case, the active menu item will automatically be marked with class current-menu-item
Then you'll be able to style it differently than others with css
Detailed information on how to declare a custom menu area in your WordPress theme
https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

Related

How to centralise logo between menu item in wordpress?

I would like to centralise logo between menu item in Wordpress dt the7 theme, is there any solution to solve this problem? Because currently the menu was using build in layout which is logo at the top and menu item at below.
I can't telling you exactly without seeing the problem, but you probably have to play with the line-height css property.
If you give us a clear example we will be able to help you more.

Joomla theme where to modify certain parts?

I am pretty experienced with wordpress but having a hard time modifying some areas of Joomla templates,
the template is,
http://demo.joomla-monster.com/177-jm-web-development
I have already installed it and can access it administration area but I couldn't be able to find the area where I can modify the footer links , or slide show images under "our latest releases..." heading or the news in the left widget.
I have looked under Extensions -> Template Manager to modify the widget or footer but there is no such option.
Can anyone guide me ?
Your template has a position, see what position is the element that you want to edit.
http://demo.joomla-monster.com/177-jm-web-development
Look for the module in this position and edit it (for the banner). Menu footer likely to be edited in the "MENU", module in this position only displays menu items.
basic joomla https://docs.joomla.org/Portal:Administrators
You can also find the module position by adding ?tp=1 to the end of your URL. For example, if you are looking to edit a module and not sure what position it is just go to http://www.yoursite.com/?tp=1 and it will outline the name of your module positions.
To edit the footer links directly, if you go to menus, there should be a menu called "Footer Links" or something like that. You can modify/create links there.

Extend nav-bar out to fit content that is out farther

I have 2 pages for my site. One a forum, another is my homepage. I have the homepage all setup, but the forum will require a bit of modification to the nav bar. I have the nav bar from the homepage mirrored to the forum so that the styles match nicely, but I made the forum wider because the forum needs more space for content and tables. I have tried numerous times to do this, to no avail.
Since the forum is not a static page, I have put the homepage on JSBin instead. They both use the same exact nav bar. This is Bootstrap 3, by the way.
Here is what I want it to look like (sorry for not embedding in post, need 10 rep): http://i.imgur.com/dlXaOZ8.png
Here is the JSBin: http://jsbin.com/fexowifica/1/
I just need to know how to make that extend out wider like seen in the image, but it won't actually be applied to the homepage nav bar, it will be applied to the forum nav bar that is seen in the image.
Thanks!
Just seems that your nav.navbar is restricted to a 960px width, make that as wide as the content of the page (.container) and it should fill out. Since I do not have the url to the actual page it is just a best guess.

custom css styles from (within - inside) wordpress dashboard

I am looking to edit the css styles from inside the Dashboard inside of wordpress and NOT have to edit the php files if possible.
I know it is possible to edit at least some of the properties so my hope is I can edit all of them right within the dashboard.
MORE SPECIFICALLY
How can I change the css states of links and submenus of a custom class? For example the a:active, a:hover, a:link etc... and ALL OF THE SUB-MENUS to custom css as well?
I have included these pictures to show you what I am trying to do and the present results.
MY CUSTOM MENU INSIDE OF WORDPRESS
CUSTOM CSS INSIDE OF WORDPRESS
THE RESULTS
I am taking the time to give a little more details in gratitude for all the help I got on stackoverflow over the years, also giving a little more info for the newbies out there. We are all learning.
Here is what worked in pictures
I used Firefox and used "INSPECT ELEMENT". While on the page I did a LEFT CLICK and from drop down I chose INSPECT ELEMENT.
Then I clicked on the PICK AN ELEMENT icon, as seen in the picture and then I hovered over the element I wanted to edit, in this case a button in the menu. This gave me the class I needed to edit.
I went into my DASHBOARD in WordPress and made this change to the code. Finally I got the results I was looking for, which I also included in the same picture as well.
Although I have not figured out how to edit the sub-menus yet I believe I am on the right track and will figure it out.
HOPE THIS HELPS SOMEONE. :)

How can I customise horizontal menu prestashop module

I would like to edit the prestashop module (Top horizontal menu v1.3) I have some categories setup so I have Parent>Child, Child on the menu. I would like to disable the link on the parent category so that it does not link to a page only the child categories link to pages.
Thx for the help.
I'm not experienced with Prestashop, but thought I would provide some sort of feedback anyway.
As a rule of thumb, whenever I'm making a parent>child navigation I like to make the parent link to a [parent] landing page, or if possible a request to the same page on the server which modifies the navigation output on the server side. This way, if a client has Javascript disabled, or if there is ever a bug in your Javascript, it does not render your navigation useless.
Might be something to think about. I don't think any item in a navigation should not link to somewhere.
Sorry I couldn't provide any specific help regarding Prestashop.

Categories