Control Primary Menu and remove header

Hi there,

1. Any chance you can link me to your site for 1.1, 1.2 and 1.3? All should be do-able with some CSS tweaks.

2. You can use CSS:

.site-header {
    display: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Or PHP:

remove_action( 'generate_header', 'generate_construct_header' );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know ??

Hello,

Thank you. CSS works.

Please, write me an e-mail address, I do not want to write a URL here.

Hi there,

You can share it through our contact form here: https://generatepress.com/contact

Just be sure to mention this topic ??

Thanks!

Hello,

This site is only experienced (no more) so I deleted all the critical data from them.

I kept the primary menu in the sidebar. (sorry, I did not translate it)

link

To make sure I write it again.

1.1 In the theme I have set the menu by clicking on the arrow to display its sub-items and clicking on the item name will display the page to which it refers.

When the page is displayed, the sub-items must also be displayed. There is no need for animation, but must be displayed.

1.2 After clicking on the name of any sub-items, the menu must not return to its original state, but must be retained + step 1.1

1.3 I added a magnifying glass at the end of the menu. I managed to get it right. However, the search box is across the menu and the pointer is vertically centered.

Just change the height of the search box to the height of one item in the menu.
I do not know why, but I just can not set it up.

2. The header is already solved. But I also do not want the page name to appear on the home page.

I tried using one plugin and jquery

 if ($("h1.entry-title").text() == "Home") {
    $("h1.entry-title").css("display" , "none");
  }

However, the result is the same. The page title is removed after the page has been loaded.

Ideal would be to do it using php. When generating a page, check if it is Home. If so, the name is removed and the page is generated without it.

I have the plugin to add php code but I almost do not understand the php and I would therefore like to overwrite the code from jQuery to PHP.

Thank you.

• This reply was modified 6 years, 4 months ago by michalrama.
• This reply was modified 6 years, 4 months ago by michalrama.

1. Let me know if this CSS gives you the desired effect:

.main-navigation .main-nav ul li[class*="current-menu-"] .sub-menu {
    position:  relative;
    left: 0;
    visibility: visible;
    opacity: 1;
    height: auto;
    pointer-events: auto;
    box-shadow: 0 0 0;
}

.main-navigation .main-nav ul li[class*="current-menu-"] .dropdown-menu-toggle,
.main-navigation .main-nav ul li[class*="current-menu-"] .sub-menu .dropdown-menu-toggle {
    display: none;
}

2. Try this:

.gen-sidebar-nav .navigation-search {
    height: 60px;
}

3. To remove the title on the home page, you can use the Disable Elements section of the Layout metabox: https://docs.generatepress.com/article/disable-elements-overview/

The “Content Title” option is available in the free version.

Let me know if this helps or not ??

Hello,

Thank you. Almost done.

The search box is OK.

I installed plugin yellow pencil. This allows adding css code to only one page. So I just removed the title on the home page.

.inside-article .entry-header {
display: none;
}

The menu works, unfortunately not at 100%.
After clicking on the sub-menu, the menu will be retained, but if I click on the item, after loading the page

– Show all sub-items and sub-sub-items (only sub-items must be shown) and all of which are bright as if they were all marked.
– the arrows will disappear completely.

I would need to see all sub-items when I click an item.
When I click on the first sub-item, all of its sub-items will be displayed.
When I click on the second sub-item, all of its sub-items will be displayed and the sub-items of the first sub-item disappear.

I hope, it is understandable.

Thank you

Hi there,

Sorry, I’m having trouble picturing this 100%. Do you have any examples I can take a look at? Might help me realize what we’re missing ??

Hello,

You can look at the web directly through the link in my earlier post.

I will try to write with numbers. (I think it will be the most understandable)

I have the menu 1,2,3

When I click on 1 after the page is loaded, its sub-items 1.1.1.2.1.3 will be displayed.

When I click 1.1 after the page is loaded, its sub-items 1.1.1, 1.1.2, 1.1.3 will be displayed.

When I click on 1.2 after the page is loaded, its sub-items 1.2.1, 1.2.2, 1.2.3 and 1.1.1, 1.1.2, 1.1.3 will disappear.

When I click on 2 after the page is loaded, its sub-items 2.1, 2.2, 2.3 will be displayed and all the sub-items 1.1, 1.2, 1.3, 1.2.1, 1.2.2, 1.2.3 currently displayed will disappear.

With your css code, only the last step and menu retain itself works.
Clicking on 1 will show all sub-items (1.1, 1.1.1, 1.1.2, 1.1.3, 1.2, 1.2.1, 1.2.2, 1.2.3, 1.3, 1.3.1, 1.3.2, 1.3.3 ), all are bright and the arrows disappear completely.

Please correct your code.

Thank you

I think I understand..

Try this instead:

.main-navigation .main-nav ul li[class*="current-menu-"] > .sub-menu {
    position: relative;
    left: 0;
    visibility: visible;
    opacity: 1;
    height: auto;
    pointer-events: auto;
    box-shadow: 0 0 0;
}

They’re a lighter gray because of the current menu item color. To keep them darker, try this:

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    background-color: #222;
}

If that isn’t what you mean, a link to a working example would be super helpful. That way I can replicate what I know you want 100% ??

Hello,

Thank you. almost, almost finished.

.main-navigation .main-nav ul li[class*="current-menu-"] > .sub-menu {
    position: relative;
    left: 0;
    visibility: visible;
    opacity: 1;
    height: auto;
    pointer-events: auto;
    box-shadow: 0 0 0;
}
.main-navigation .main-nav ul li[class*="current-menu-"] .dropdown-menu-toggle,
.main-navigation .main-nav ul li[class*="current-menu-"] .sub-menu .dropdown-menu-toggle {
    display: none;
}
.main-navigation {
    background-color: black;
}

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    background-color: black;
}

With this code, the menu behaves exactly as I want.

I’ve changed my background color to black.

Unfortunately, the problem with the bright is still there.

When I open item 1.1.1, the list will look like this.

1
1.1
1.1.1
1.1.2
1.1.3
1.2
1.3
2
3

Selected items from the beginning of 1, 1.1, 1.1.1 should be bright, the rest should be black

1 appears correctly (bright)

1.1, 1.1.1 are black and 1.1.2, 1.1.3, 1.2, 1.3 are bright

It should be exactly the opposite.

And the arrows in the selected item and your sub-items will disappear completely. (If I switch to another item, the arrows will appear again)

Please be repaired.

Thank you.

• This reply was modified 6 years, 4 months ago by michalrama.

Hello,

Stupid idea. The color setting would not change.
As for the arrows, I did not delete the part of the code (It was enough if I read it properly).

Still, I would like to deal with one thing.
The arrows are displayed but do not rotate.
When I click an item, its sub-items are displayed, but the arrow will unfortunately remain in the original state.
I noticed that when clicking on the arrow (li) is added and removed the class sfHover (if I understand it well)
Depending on what I found, it can not be done using CSS (or SASS).
Is it necessary to do it using jquery or how exactly does your theme perform?

Please advice

Thank you

• This reply was modified 6 years, 4 months ago by michalrama.

Can you try this for the color?:

.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation ul ul {
    background-color: black;
}

For the arrows, try this:

.main-navigation .main-nav ul li[class*="current-menu-"] > a .dropdown-menu-toggle {
    transform: rotateX(180deg);
}

Hello,

Yes, the colors are used exactly as I wanted. Thank you.

Unfortunately, I would like to finish our discussion, but two mistakes remain.

1. When I click an item, it displays its sub-items and the arrow rotates, but then you can click on the arrow and nothing will happen. (the arrow will only rotate)
You have to click on another item at the same level to return to its original state and then the arrow works normally.

2. I wanted to set the left sidebar (where menu is on) to fixed, but when I do it, some items in the menu and the magnifying glass at the end can be very badly clicked (after you place the cursor on the item, it is unmarked, and you need to find a specific place where you can click on it). Interestingly, however, in the original menu view, it works perfectly, problems begin when I unpack individual items

Please advise

Thank you

1. Ah yea, that’s a problem with using the CSS method. We’re basically forcing the sub-menu to show, which overrides the standard show/hide functionality.

I just tried a few different filters, but couldn’t get it working properly unfortunately.

There’s two options:

a) We disable the arrows, so the sub-menus only appear when we’re on the page.
b) We use jQuery to show the sub-menus when we load the page, which will cause them to appear once the page has loaded (creating a bit of a jump).

Neither are ideal, but I’m afraid I can’t think of a better solution at the moment.

2. Any chance you can set this up so I can test it myself? I’m not seeing any fixed functionality within the menu as of right now.