Docs

[wt]

Hello there,
I created a front page for my news blogs. I want this page to be accessed only on desktops and laptops while my blog news category will be accessed on mobile instead. Is there anyway to achieve this? I mean, I want the “News” menu item to link to the page I created on desktops and laptops only, while the “News” menu redirects to the “News category” on mobile devises? I appreciate any help on this please?
Thanks so much!

[wt]

This reply has been marked as private.

[wt]

This reply has been marked as private.

[Paul R]

Hi,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[wt]

I tried to create two menus one for mobile one for desktop to solve this issue. I was searching for the forum and got this thread https://community.theme.co/forums/topic/is-it-possible-to-have-two-menus-one-for-mobile-and-one-for-desktop/ and tried to use it. But for some reason the secondary menu spread vertically below the primary menu. Can someone help? I have attached a screenshot here.
Thanks!

[Lely]

Hello There,

Thank you for the screenshot. Please add the CSS too. That will hide the other menu on desktop. To help you better, please share your site URL.

[wt]

Hello Lely,
Thanks so much for the response. URL: https://ethiobook.net

I have added the codes as follows:

1. In the X child theme’s functions.php I added
//Register Navigations
add_action( ‘init’, ‘my_custom_menus’ );
function my_custom_menus() {
register_nav_menus(
array(
‘primary-menu’ => __( ‘Primary Menu’ ),
‘secondary-menu’ => __( ‘Secondary Menu’ )
)
);
}

2. In the Header.php I added
<?php wp_nav_menu (array(‘theme_location’ => ‘primary-menu’,’menu_class’ => ‘nav’));?>
<?php wp_nav_menu (array(‘theme_location’ => ‘secondary-menu’,’menu_class’ => ‘nav’));?>

3. In the footer.php I added
<?php wp_nav_menu (array(‘theme_location’ => ‘primary-menu’,’menu_class’ => ‘nav’));?>
<?php wp_nav_menu (array(‘theme_location’ => ‘secondary-menu’,’menu_class’ => ‘nav’));?>

4. In the custom CSS I added:
@media screen and (max-width: 980px){
#secondary-menu {
display: block;
}
}

I don’t really know what’s wrong here.

Thanks!

[Lely]

Hello There,

You have defined #secondary-menu ID but then it is not added on your menu. Please look for this line of code:
<?php wp_nav_menu (array('theme_location' => 'secondary-menu','menu_class' => 'nav'));?>
Update to this:
<?php wp_nav_menu (array('theme_location' => 'secondary-menu','menu_class' => 'nav','menu_id' => 'secondary-menu'));?>

Hope this helps.

[wt]

Hello Lely,
Thanks for the response. However I replaced the code but the issue still there.
Thanks!

[wt]

I replaced in both header.php & footer.php files.

[Lely]

Hello There,

Upon checking, your site source code, the ID on the menu is not added yet. I can see you have caching, please clear cache to generate update content. Then also check the following part on your custom CSS:

/*Feature box title customizer for small ipods & cell-phones
@media (max-width:767px){
 .x-feature-box-title {
    font-size: 12px;
    line-height:1;
}
}
/*Feature box text customizer for small ipods & cell-phones
@media (max-width:767px){
 .x-feature-box-text {
    font-size: 12px;
    line-height:1;
}
}

Please update this line:
/*Feature box text customizer for small ipods & cell-phones
To this:
/*Feature box text customizer for small ipods & cell-phones*/
Incorrect comment will cause CSS syntax error and this will stop other CSS below this error from working. Clear cache again after this CSS update.

Hope this helps.

[wt]

Dear Lely,
Thanks so much for checking the sites source code. I checked and corrected all comment errors and cleared all cache. However the issue is still there.
Thanks so much for the help.

[wt]

I can give you the credentials if you need it too.

[Christopher]

Hi there,

The secondary menu is displaying on your site, but you need some CSS to style it.
Please add following code to hide it on desktop :

@media (min-width:979px){
.menu-secondary-container {
    display: none;
}
}

@media (max-width:979px){
.x-navbar-wrap{
display:none;
}
}

Hope it helps.

[wt]

Thanks Christopher for the help,
The code hides the menu on desktop. However the issue is still there on mobile view. Can you please help?
Thanks!

[Author]

Posts