Trouble with Navigation - Desktop/Mobile

Support
#1

I’m having trouble with the navigation on my staging site.

In the screenshot of the mobile sites, the one on the left is not an example. The one on the right is my implementation of X theme. I’m looking to place a button to the left of the navigation AND remove some of the extra spacing below the menu. I’ve tried a lot of different settings in the Customizer and none pull up that extra spacing. You’ll see in the desktop screengrab that the extra spacing in the menu is still a problem.

With the button, I’d like it to appear to the left of the hamburger menu on mobile and as the last item on desktop.

Finally you will see on mobile that the background of the menu is transparent. How is this addressed?

Visit http://staging.fat-bee.flywheelsites.com/. Login to the site is: flywheel, password: greedy-argument.

If you need the wp-admin login, let me know.

#2

#3

#4

Hi,

I would like to check but we currently could not access your site.

We need your http login.

Thanks

#5

Thanks! That was included in the original ticket. Here it is: Visit http://staging.fat-bee.flywheelsites.com/. Login to the site is: flywheel, password: greedy-argument.

#6

Hi There,

The extra spacing is because of the following custom CSS:

header .x-navbar .x-navbar-inner {
    height: 172px;
    margin-bottom: -10px;
    margin-top: -12px;
    min-height: 50px;
    padding-top: 0px!important;
}

Although, I can’t find the exact place where you have add it. See this: https://screencast-o-matic.com/watch/cFVe1xonAR
If we will delete the height from that CSS, it will now follow the 50px height you have set on Theme Options > Header > Navbar Top Height

To move the button, try adding this custom CSS too:

@media (max-wdith:480px){

#csshero-very-first-trigger { /*Adjust the values accordingly*/
    right: initial; 
    left: 40%; 
    top: 65px;
}
}

Hope this helps.

#7

If I pull all of the CSS referenced, I get the following. Somehow the header .x-navbar item is within that. I’ve checked both the Editor AND the Customizer and there is no custom CSS. Are there any other custom CSS areas in the theme?

Here is the full custom CSS that I see: .hentry .woocommerce ul.products li.product .price { font-size: 18px; font-weight: bold; padding-top: 15px; } .hentry .woocommerce ul.products li.product h3 { font-size: 20px; font-style: normal; font-weight: bold!important; text-align: center; } .woocommerce div.product div[itemprop=description] { font-size: 13px; } header .x-navbar .x-navbar-inner { height: 172px; margin-bottom: -10px; margin-top: -12px; min-height: 50px; padding-top: 0px!important; } header .x-topbar .p-info { font-size: 13px; font-weight: 800; } html body .site#top .x-section .x-text.cs-ta-center h4 { margin-top: 9px; } html body.page-id-6702 .x-section#x-section-1 .x-text h4 { margin-top: 16px; } html body.page-id-6777 .x-section#x-section-1 .x-text h4 { margin-top: 14px; } html body.page-id-7040 .x-section#x-section-8 .x-text h4 { margin-top: 9px; } html body.page-id-7141 .x-section#x-section-2 .x-img { width: 154px; } html body.page-id-7141 .x-section#x-section-6 .x-img { width: 184px; }

#8

Found it, it’s in CSS Hero.

#9

I’ve gone through and resolved the header spacing issue. i still have trouble adding a button to the navigation. I’ve added the code you’ve provided to the Customizer CSS area, but it didn’t create a button.

I’m basically looking to turn the Pay link in the navigation into an orange button. On mobile, this would respond and appear to the left of the hamburger navigation.

#10

Hi,

To make it a button, you can add this in Custom CSS

.x-navbar .desktop .x-nav > li.menu-item-7345 > a > span {
        background-color: #ff6600;
    padding: 10px 15px;
    display: inline-block;
    margin-top: -10px;
    border-radius: 5px;
}

.my-button {
  display:none;
}

@media(max-width:979px) {
   .my-button {
         display:inline-block;
         position:absolute;
         background-color: #ff6600;
         padding: 10px 15px;
        left:calc(50% - 30px);  
       color:#fff;
     top:30px;
}

.x-navbar .desktop .x-nav > li.menu-item-7345 {
   display:none;
}
}

Then add this in your child theme’s functions.php file.


function add_my_button() {
    ?>
    
    <a href="http://staging.fat-bee.flywheelsites.com/pay-now/" class="my-button">Pay</a>
    <?php
    
}
add_action( 'x_after_view_global__brand', 'add_my_button', 10 );

Hope that helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.