Hi, I have an issue by where the sub menu is cut off or partially shown in a desktop browser window not full screen.
If you load the page full screen, you get a total menu sizing meltdown.
the site: epoxygroutpro.com.au. Sub menu under “services”.
I have disabled all plugins to check if it is a conflict. I have reduced font size and spacings to no avail. cleared and deleted cache and min css.
I am leaning towards a css conflict however I can not join point it.
Help appreciated.
Hi @tmoreland27,
Thank you for writing in, currently, your Navbar Font Size are way too big (134px), please navigate to Theme Options > Header and adjust that (maybe around 15px only)
Regarding the dropdown cutoff issue, that is because your navigation labels are too lengthy, you can either rephrase that to not too long or add the custom CSS below to Theme Options > CSS, this will float your sub-menu dropdown to the right side that has enough space.
body .masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
left: 98%;
right: auto;
}
Hope it helps,
Cheers!
thank you. Yes that would be my fault frantically changing text type sizes seeing if it would help and I’ve miss type.
if I may ask. When looking at the menu in mobile size everything is working fine now, except one issue which is the button text box is not centred in the middle, can you assist ? screen shot: https://paste.pics/78PRU
I think I fixed it, the entering of the boxes I changes width from 95% to 100%
.x-btn-widgetbar-mobile {
position: relative;
top: auto;
right: auto;
width: 100%;
float: none;
I could be wrong, appreciate your expert advice!
While I’m on a roll, can I ask you to look into why the hamburger menu starts expanded. is there a code so when the page loads the menu is collapsed?
Sorry for all the edits, every time I feel something is resolved I find another.
in addition to the Hamburger menu, and the text box button centring.
I have just noticed that the text box button dissapears depending on size of screen.
in screen shot https://prnt.sc/pwvm1e you will see the box I refer to with my name and number which is as it should be,
however on resizing the window the box disappears and just some text is displayed as per this screen shot: https://prnt.sc/pwvn56
help is appreciated, thank you
Hi @tmoreland27,
The reason for that is not properly formatted CSS. Example,
@media (min-width:780px) and (max-width:1279px) {
.x-navbar .x-nav {
padding-left: 0.7em!important;
padding-right: 0.7em!important;
font-size: 14px !important;
}
.widgetbar-phone-number {
width: 100%;
float: none;
clear: both;
}
.x-btn-widgetbar-mobile {
position: relative;
top: auto;
right: auto;
width: 96%;
float: none;
margin-bottom: 20px;
padding: 1em 0;
border: 1px solid;
border-radius: 4px;
font-size: 14px;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
.widgetbar-phone-number {
position: fixed;
line-height: 1;
background-color: transparent;
z-index: 1033;
width: 174px;
background: transparent;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
float: right;
cursor: pointer;
transition: background .3s;
-webkit-transition: background .3s;
font-size: 14px;
top: 21px;
right: 139px;
color: #333;
border: 2px #333 solid;
}
.x-btn-widgetbar-mobile {
position: relative;
top: auto;
right: auto;
width: 100%;
float: none;
margin-bottom: 20px;
padding: 1em 0;
border: 1px solid;
border-radius: 4px;
font-size: 14px;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
}
footer.x-colophon.top {
background-color: #404447
}
body .masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
left: 98%;
right: auto;
}
You have not properly closed the starting block @media (min-width:780px) and (max-width:1279px) {, hence, any CSS added below it belongs to that block. Which makes your CSS not working on the smaller size.
This is wrong
@media (min-width:780px) and (max-width:1279px) {
/* all your css here */
/* other css that doesn't belong to @media */
but this is correct
@media (min-width:780px) and (max-width:1279px) {
/* all your css here */
}
/* other css that doesn't belong to @media */
Hope this helps you with the troubleshooting 
Thanks!
Thank you very much, your guys are legends!
If I can request, can you look into why the mobile hamburger menu is not loading collapsed ?
Thank you
Hey @tmoreland27,
It seems like a cache issue as the content of your site is being served by the cache, try clearing the plugin’s cache and browser’s cache as well then deactivate your caching plugin and other optimization services and see if this resolves the issue.
If the issue remains then please check for the following:
-
Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
-
Remove custom CSS, JavaScript and deactivate your child theme and switch to parent theme (take a complete backup first).
Let us know how this goes!
i’ve failed lol.
having done the above deleting all cache from service site browsers, uninstalling everything and reinstall nothing works.
the only thing that did change is now when viewing epoxygroutpro.com.au in a desktop browser the menu dar is still at the top of the page and the page content scroll behind. It never did that it use to scroll with the page.
But still no joy with the hamburger menu in mobile mode.
I have provided login details in a secure note, could you have a quick look and see what I am going wrong with this hamburger menu please.
thank you in advance.
Hi @tmoreland27,
It seems to be caused by one of your customization in the child theme. You can confirm this by enabling the parent theme and the menu works okay.
It seems your code have many missing attributes compared to the latest code
If you’ll apply customization, you should also maintain the structures and attributes that were there. You can start with the original file and it’s located in \framework\legacy\cranium\headers\views\global\_nav-primary.php
Thanks!
thank you for your advice, however its double dutch to me…
I have located the file https://prnt.sc/pxrivp in the x-theme, however I cannot see a similar file in the child!
is this php file https://prnt.sc/pxrivp the one I need to edit? I’m of the thinking this is the correct x theme unedited file to which I should be comparing and editing another php file being used currently!
can you lay it out in layman’s terms for simpleton.
I deactivated the child theme and activated the x theme as you suggested and yes the menu works so I concur its in the child theme php, I just don’t know where or how to find the file to edit or how to copy the php from x to child to make the child work correctly.
I have just tried copying the x theme php and creating a directory in the child theme and copying the php across, you might be able to see where I am in this screen shot. https://prnt.sc/pxrx8c
I’m out of ideas, need your help!
thank you
Hey @tmoreland27,
I have resolved your issue with the following:
1.) I have updated the code of your _nav-primary.php file using this:
<?php
// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
ubermenu( $config_id, array( 'theme_location' => 'primary') );
else: ?>
<a href="#" id="x-btn-navbar" class="x-btn-navbar collapsed" data-x-toggle="collapse-b" data-x-toggleable="x-nav-wrap-mobile" aria-expanded="false" aria-controls="x-nav-wrap-mobile" role="button">
<i class="x-icon-bars" data-x-icon-s=""></i>
<span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>
<nav class="x-nav-wrap desktop" role="navigation">
<?php x_output_primary_navigation(); ?>
</nav>
<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile x-collapsed" data-x-toggleable="x-nav-wrap-mobile" data-x-toggle-collapse="1" aria-hidden="true" aria-labelledby="x-btn-navbar">
<?php x_output_primary_navigation(); ?>
<a class="widgetbar-phone-number x-btn-widgetbar-mobile" href="tel:+61405148449" title="Phone-Number">Call Trent: 0405 148 449</a>
<a class="widgetbar-phone-number x-btn-widgetbar-mobile" href="sms:+61405148449">Text Me!</a>
</div>
<?php endif; ?>
2.) And then I moved your file from framework//views/global/_nav-primary.php to framework/legacy/cranium/headers/views/global/_nav-primary.php
Please check your site now.
You legend! Thank you so much it works as it should. Appreciated.
You are most welcome!
We’re just glad we were able to help you out.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.