X theme - nav bar

[Cherylwoodman]

Hi Themeco,

I had a few questions regarding your nav bar drop down menu;

1. How do i make the header option - not a link? i.e. at the moment if someone clicked on this option on mobile they wouldn’t see the whole menu before being directed to the first page > http://www.honestyforyourskin.co.uk/skincare-blog/

2. Is there a tutorial you have for styling the dropdown box? This is my sites default > https://www.screencast.com/t/ZgOko9Gh7d and i’d like to for instance curve the menu edges - and also see what other options you have available

3. There’s a topbar function - but only 2 options for it in the X theme styling first is shop topbar and 2nd is background colour. Do you have a tutorial for topbar styling/options?

Thanks so much,

Cheryl

[Prasant]

Hello Cheryl,

Thanks for asking.

1. I am confused with the question. So let me address address the same as per my interpretations and if that’s not what you are looking for, please clarify the question with some more information.

• Custom Blog Link: If you are looking for a custom blog link then the same can be done from Appearance > Menus > Custom Links. In URL text box you can enter the custom URL.
  
• Sub menu under blog menu: If you would like to display sub menu under blog menu and while the requirement is to remove link from blog menu then under Appearance > Menus > Custom Links add the Blog menu and in URL text box add #. Under the menu you can add the submenu. For more information please take a look at following article. https://organicweb.com.au/wordpress/menu-remove-hyperlink-instructions/

2. You have the option of adding following CSS under X > Theme Options > CSS:

/* code to change submenu background color */
.masthead-inline .x-navbar .desktop .sub-menu {
    background-color: #ddd; 
}
/* code to change color of submenu links */
.masthead-inline .x-navbar .desktop .sub-menu a {
    color: #fff;
    font-size: 15px;
}
/*code to change submenu link hover color*/
.masthead-inline .x-navbar .desktop .sub-menu a:hover {
    color: #000;
}

3. To change the CSS of topbar other then background color, please add following CSS under X > Theme Options > CSS:

/*code to change color and font size of topbar text */
.x-topbar .p-info, .x-topbar .p-info a {
    color: #fff;
    font-size: 14px;
}
/*code to change color and font size of topbar social icons */
.x-topbar .x-social-global a {
    color: #fff;
    font-size: 14px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.