Help with link malfunction

[Christen]

I am working here:  https://www.essence-vyt.com/

This client wants her navigation in the left sidebar and in the footer. Since the custom menus were not to her design liking, I built simple links in the sidebar widget and used HTML in the footer to get the effects you see. I began adding her content yesterday which is when I noticed that both the sidebar and footer  links to the testimonial page load the home page. I used Firebug to look at it, but was clueless as to what I was looking at.

Can you help solve?

Many thanks, Christen

[scrambler]

It does not look like the links are the problems, but that the permalink of your testimonial page points to the home page

https://www.essence-vyt.com/testimonials/

Displays the same as

https://www.essence-vyt.com/

So the first thing I would do is go to Settings > Permalinks, and click SAVE again to resave the permalink and see if that fixes it. If you are using a cache plugin, make sure to also clear the cache

[Christen]

Thanks Scrambler! That fixed it!

[scrambler]

By the way, in the future, instead of redoing menus manually, you can use the regular menus and widgets, and style them to your convenience using custom CSS.

If you have “Plus” you can use extra menus and widget that use the stylings available in the admin (plus eventually custom CSS).

For the WordPress Sidebar Custom menu widget, you have some pointers on the custom CSS here.

http://forum.weavertheme.com/discussion/11685/weaver-xtreme-tips-and-tutorial-part-6

[Christen]

Thanks Scrambler, I will review these functions in Plus, which I have not needed before now.

[Christen]

Okay, I played with the custom menu widget as well as the X-Plus menu widget.

You can see what I ended up with here https://www.essence-vyt.com/

This is the X-Plus Menu Widget using the Vertical-Accordion + Extra Menus styling

Some combinations rendered NO menu at all!

I would really like to eliminate the horizontal lines between the menu items, and to have each menu item aligned to the right, instead of to the left. I cannot figure out how to accomplish either.

Every menu option for alignment is set to the right, and I tried making the separator bar color the same as the BG color to see if I could “disappear” it that way, but to no avail… 

Can it be done?

Also, for Smart Menus, does this require the Smart Menus Plugin to be installed?

[scrambler]

To remove the separating border and align the menu items right, add the rule below in Main Options > Fonts & Custom > Custom CSS Rule box

.is-mobile-menu.menu-arrows a {border:none;text-align:right;}

For Smart menu, just check the option at the top of the main options > Menus page

[Christen]

Okay, that worked when I put the rule in the x-Plus Extra Menu css box…

on the home page, the Title “Locations” has disappeared from the Title BG in the secondary/right sidebar, just under my client’s photo. I cannot figure out how that just happened!

Can you help?

[Christen]

This might need a new thread – some of my sidebar content suddenly thinks its a hyper link…

[scrambler]

1- I am not sure what you are calling “the x-Plus Extra Menu css box…”

Rule normally go in Main Options > Fonts & Custom > Custom CSS Rule box

2- Dont understand what you mean by “the Title “Locations” has disappeared from the Title BG ” I see “class Location” in the sidebar

3- If all your sidebar is becoming a link you probably have some HTML syntax error in your content with a missing closing tag…

[Christen]

Ooops, I missed the “Fonts & Custom piece and stayed in the Menus tab

My logic: because I am using the X-Plus Menu widget with the settings with the Vertical-Accordion + Extra Menus Style, I had to put your rule in the Main Options > Menus > EXTRA MENU > Custom CSS Rule box

It worked.

And, you were right, I had a syntax error that I found and fixed – I’m all good

and, I really appreciate your assist!

many thanks

[scrambler]

You would have to be more specific because there is no Main Options > Menus > EXTRA MENU > Custom CSS Rule box

There are some CSS+ boxes on various options if you meant one of them you would need to clarify which one.

The menu bar BG CSS+ box probably would work for the rule I gave you

[Christen]

Actually there is…

Main Options > Menus >Extra Menu (X Plus) and it IS the Menu Bar BG CSS styling box.

Just because it works in this location does not necessarily make it the best place to insert the rule, I suspect based on your replies.

So if there is an optimal placement for this rule let me know and I will move it.

Thanks for sticking with this with me – I appreciate it!

[scrambler]

When you place CSS in an option CSS+ box, the theme  will generate a rule that will have the selector corresponding to the Option, followed by the CSS you put in the box.

If the CSS you place in the CSS+ box already has a selector, you need to make sure that this selector comes after the one being added by the theme for that specific CSS+ box or else the rule would be invalid. (you can inspect your page with your browser developer tool to verify that)

For that rule, that CSS+ box it a valid choice as in the page, the selector generated by the box comes before the selectors that are in my rule.

[Christen]

What do you mean by “selector” ?

[scrambler]

A CSS rule is composed of two parts, the Selector(s) that define which objects the rule applies to, and the property rules (inside curly brackets)that define what style(s) should be applied to the selected objetcs.

In my rule

.is-mobile-menu.menu-arrows a {border:none;text-align:right;}

.is-mobile-menu.menu-arrows a   are the selectors.

It says to apply the property ({…}) to the  a tags (link items) that are under an object with both the classes is-mobile-menu and menu-arrows. (classes are attached with no space so it means they are on the same object)

{border:none;text-align:right;}  are the properties that need to be applied to the selected objects

When you place that rule in Main Options > Menus >Extra Menu > menu Bar BG CSS+ box

The rule generated will be

.menu-extra .wvrx-menu-container .is-mobile-menu.menu-arrows a {border:none;text-align:right;}

The Theme adds the selectors for the extra menu bar BG which is .menu-extra .wvrx-menu-container

If you inspect the page, you will see that the structure of the extra menu HTML on mobile is

<div class=”menu-extra…..”
   <div class=”wvrx-menu-container…..”
        <ul class=”menu-arrows is-mobile-menu …..”
            <li….
                 <a….. (the link menu item we want to style)

So the resulting selector ( .menu-extra .wvrx-menu-container .is-mobile-menu.menu-arrows a ) is valid as it correspond to the HTML hierarchy

[Author]

Posts