wordpress menu and styling...

[tony84]

I will do my best at explaining this....

I have installed wordpress, and found a CSS theme I liked (sadly not a wordpress theme but I have in the main managed to port it over - and im just trying to get a few bits working).

The code on the css template is:

<div id="menubar">
        <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li class="selected"><a href="index.html">Home</a></li>
          <li><a href="examples.html">Examples</a></li>
          <li><a href="page.html">A Page</a></li>
          <li><a href="another_page.html">Another Page</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
      </div>

Im not sure if you can tell from that, but depending on the page that is active the style of the link changes.

I was going to put - <?php wp_nav_menu(); ?> on my site, but that will not do amend the styling depending on the page im on so is not much use.

Hopefully that makes sense?

I could use the code above and just alter it for my pages but wheres the fun in that.

 

[Paul Murray]

You should be able to just use a:active CSS to change the style of the link that refers to the page you're on.

.menu ul li a:active {

/*ACTIVE PAGE STYLES GO HERE */

}

Doing it the way you've linked will require you to change the menu code on each page, either by hand or through a snippet of PHP. Using CSS should work and will be extremely quick and easy.

 

[tony84]

Its not so much that im having issues with, I have the CSS side of it.

Its more a case of how do I get the links to pull the information from the CSS.

Im sure you know wordpress far better than I do...
All of my pages can be listed by using - <?php wp_nav_menu(); ?>
But im not sure how I can style the links using the above.

 

[Paul Murray]

If you PM me a link to your site I can have a quick look, since it's probably easier than me trying to walk you through it here.

 

[Alan]

The task you have, if I understand it, it to map the CSS from a non Wordpress structure to a Wordpress structure. wp_nav_menu is fully documented here https://codex.wordpress.org/Function_Reference/wp_nav_menu so it is just a matter of mapping your desired CSS to your target. It can help to set up a deveopment site and 'inspect element'.

It is a painstaking and time consuming process, but it is part of what web devs do for money day in / day out.

 

[fisicx]

Or get the styling from the 2015 theme and add it to your template then style accordingly. Make use of the style inspectors that come built into many browsers so find out what style does what

It's not a difficult as Alan says, just takes time. Or you bite the bullet and get a dev to do is for you. The menu is just part of the layout, wordpress has a whole lot of other bits it's expecting to see in the CSS and you still need to add the code to make it responsive....

 

[tony84]

Its not difficult in the main, I have done about 80% of it myself so far without too many problems but this menu is something I am struggling with.

Ive got some work to do this morning but will give it another crack later on.

 

[fisicx]

So just import the menu styles from another theme as I suggested and strip out the bits you don't needs. Far simpler than trying to do it yourself.

 

[tony84]

Its fine, managed to get there with just a bit of help

Thanks to @Paul Murray for helping me sort it out - by helping I mean basically doing it.