Docs

[nillamary]

Uploaded my Ethos 2 theme, created a Child and now I’d like to customise the stack. I have the following questions with regards to my menu:
1.How do I replace my current nav menu (Home) with a Hamburger icon/menu?
2. A Hamburger menu displays When previewing my site on both mobile devices. However, the menu is not fixed and disappears when scrolling down. How do I fix the Hamburger menu so it’s at the top of the device at all times?
3. How do I move my uploaded logo image from the centre top to right top?

Many thanks

[Jade]

Hi there,

We could provide you with custom CSS solutions to achieve these. Kindly provide your URL so that we can check your site.

Thanks!

[nillamary]

This reply has been marked as private.

[Lely]

Hi There,

To make the menu fixed on mobile, please add the following custom CSS:

@media (max-width: 979px){
.x-navbar-fixed-top{
    position: fixed;
}
}

Purple is your site LINK hover color on Appearance > Customize > Typography > Site Links Hover Color

Regarding the logo and the menu button, by default the menu button is on the right on mobile screen. Then you have added a custom CSS to move the logo on the right of the screen too. For mobile screen both logo and menu link is on the right. Since the container width of both logo and menu button is not enough to display it in just one row, the menu button goes down. This creates an effect that the logo is on top of the menu button and center.
Try to add this:

@media (max-width: 979px){
.x-navbar .x-brand {
    max-width: 80%;
}
}

Hope this helps.

[nillamary]

Excellent, that worked! I’m entering all this in my Global CSS not Cornerstone, is this correct? I’m not sure what the pros are using Cornerstone?

I have more questions, sorry:
1. Can I make the Hamburger bars white instead of red for mobiles devices?
2. I’d like my main menu on a PC to display similar to the mobile devices as at the moment, the nav menu displays the options and not hidden within a Hamburger menu.
3. Found where to change the purple line. However, I want to remove this hover link and have the options (words) change colour on hover, instead of the link.
4. Is it possible to make the nav bar more transparent for all devices than display in full black?
Many thanks.

[Joao]

Hi There,

If you use CSS in Cornerstone it will just affect that specific page, in this case you are doing correct by adding on Appereance > Customizer > Custom > CSS because this setting you would like to affect your whole website.

To remove the purple line please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    box-shadow: none;
    border: 0;
}
.x-navbar .desktop .x-nav > li > a > span:hover {
color: red;
}

To change the color if the icon you can add:

.x-icon-navicon:before, .x-icon-reorder:before, .x-icon-bars:before {

    color: white !Important;
}

2. I’d like my main menu on a PC to display similar to the mobile devices as at the moment, the nav menu displays the options and not hidden within a Hamburger menu. -> Please clarify

4. Is it possible to make the nav bar more transparent for all devices than display in full black? -> Please clarify.

Also I see that your mobile navbar links are all the way to the right? is that in purpose? if not please provide your WP Admin Credentials so we can take a closer look on your setup and help you adjusting it.

Thanks

Joao

[nillamary]

Thanks, that worked, however; the 2nd level (nested) menus don’t change on hover. Does this level need different code? Red is fine for now as I will change colour when I’ve decided on my colour scheme.

2. On mobile devices, the nav menu defaults to a Hamburger menu icon. User clicks the icon and the menu options display. I’d like this Hamburger icon globally for my site’s menu not just mobile devices.

4. At the moment, the masthead is a solid black colour. Is it possible to have this more transparent/opaque so that when I load background images the masthead won’t be so solid and blend in more?

5. Yes, I like my nav bar on the right as it is currently displayed. What I would like though is to reduce the space between the nav bar options (Home, About, Travel Blog, etc.). Is this possible?

6. When hovering over the About option, the nested menu options display and hides About. What CSS code do I need to space this beneath About?

Thank you!

[Lely]

Hello There,

Please check in with your hosting for now. I can’t access your site to check other issues. See attached screenshot.

[nillamary]

This reply has been marked as private.

[nillamary]

I’ve contacted my host and was advised to ask you what IP you are using as there’s no Error 500 in my log. Just to help him locate the problem. Thank you.

[Rue Nel]

Hello There,

Thanks for updating in!
Regretfully we cannot give you an specific IP because we have several staff checking in your website.

2] The hamburger menu will only appear on smaller screens. Do you want to hide your menu in desktop screens and replace with the hamburger menu? Please clarify.

4] To make your navbar a semi transparent color, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-logobar, 
.x-navbar, 
.x-navbar .sub-menu {
  background-color: rgba(0,0,0,0.85)
}

.x-navbar .sub-menu {
    background-color: transparent;
}

5] To reduce the space between the nav bar options (Home, About, Travel Blog, etc.), please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .mobile .x-nav li>a {
    padding: 10px;
    margin-bottom: 0;
}

@media(max-width: 979px){
    .x-navbar .mobile .x-nav>li.x-menu-item-search,
    .x-navbar .mobile .x-nav>li.x-menu-item-woocommerce>a {
        margin-top: 0 !important;
    }
}

6] Please check first the result of the code of the #5 code and see if this is enough space for the sub menu “About”

Hope this helps. Please let us know how it goes.

[nillamary]

Ok, I’ll get back to my Host but that means they can’t fix the issue you had.

2. Yes, I’d like to replace my Menu with a Hamburger icon, which when clicked/hovered displays my Menu options.

4. Code did not have an affect on main nav bar. However, hovering over About, the nested menus do display as transparent.

5. Code reduces the space between nested menu items and this spacing looks good. As long as this spacing transfer to the recommended minimum tap 7mm or 48 CSS pixels, when displayed on a mobile device.

6. Can I now display the ‘Awards’ and ‘Exhibitions’ items directly beneath my ‘About’ item?

Thank you!

[Joao]

Hi There,

2- Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 2000px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

4- Please use the following code instead, there was a missing ; on the previous code provided.

.x-logobar, 
.x-navbar, 
.x-navbar .sub-menu {
  background-color: rgba(0,0,0,0.85);
}

.x-navbar .sub-menu {
    background-color: transparent;
}

5- Not sure what you need here, please clarify.

6- Please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar .mobile .x-nav .menu-item > ul.sub-menu {
  display: block;
}

Hope that helps

Joao

[nillamary]

Thanks!
2. Hamburger displays just fine. However, the menu options are a bit ugly but will need to work out how I want these to display. The ‘About’, ‘Award’, ‘Exhibition’ options are not behaving as my other site. I would like to hover over About’s down-arrow to display nested options. When hovering over down-arrow, nothing displays. Have to click About to display nested options. I would like to hover over about and have nested options display, without clicking and going to About page.

4. Still not working – instead of transparent how about 50% opaque?

5. Research shows that for a mobile device, button/menu spacing has to be 48px.

6. Did not work. I won’t use this with the Hamburger menu as the options look OK to the right of ‘Awards’ now.

[nillamary]

Sorry, 4. is more transparent now and not solid black. However, the Hamburger icon’s background is sold black. Can I blend this with the nav bar background?

[Author]

Posts