-
Posts
-
On the page I am building I needed to place the menu in a specific position using the following code:
.main_menu {
position: relative; left: 400px; top: 100px;
}Now the sub menu is about a km below the menu. Also the menu doesn’t reposition when the shrinking header is used so I had to turn that off.
I would like to know how to at least place the sub menu properly. If I can have the menu tucked under the logo as it shows now and have it shrink with the header too, that would be optimum. I need to at least fix the submenu though.
Hey MichaelAlbany!
Everything is possible, but that would need a lot of work to be done.
You can contact one of our Customization Contractors, who will help you out with the process.
Let us know if we could do anything else, regarding our theme
Cheers!
BasilisBasilis,
So you’re saying that there is no simple way to bring the sub menu up into the proper position without custom coding?
Hey!
You have multiple rules for the same issue in enfold child theme to overwrite the theme styles which is causing this issue if more rules are added to the same issue it will be difficult to maintain the css and make any customisations in future hence we recommend you hire a freelancer so they come up with a maintainable css for you.
You can try the below css to push the main menu up
.main_menu { top: -100px!important; }Regards,
Vinay KashyapVinay,
I really don’t have that many rules applied. In fact other than position the only non-default setting in the header is the size of the header to accommodate the large logo. Even if I remove all quick CSS (no other CSS has been edited/added outside of options within the theme), the huge gape between the menu and the submenu remains.
I took two screenshots to show this. The first is with the .main_menu CSS edits and the second is with zero quick CSS, only the header area set to a height of 300, the max allowed in the theme Header options. note that the sub menu is way down in the body area and not close to the main menu at all.
First with the code you sent:
http://newjewelry.sonyasanchezarias.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-20-at-10.08.43-PM.png
Now with the default:
http://newjewelry.sonyasanchezarias.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-20-at-10.09.30-PM.pngEven if I remove the logo, set the header size to Slim, there is still a large, but acceptable, distance to the sub menu.
http://newjewelry.sonyasanchezarias.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-20-at-10.22.09-PM.pngI have purchased 11 licenses and this is the first time this is an issue. Most of the other sites have the divider between the Main Menu and the Sub Menu which makes that separation less obvious, and many have custom header sizes.
Is the submenu set to be the header height lower than the menu or how is that coded? If it were to be X pixels below the boarder it wouldn’t change position with the menu position.
The position of the sub menu seems to be relational to the size of the header, is that correct? If so, is this set in the style.css file?
NOTE: I found that the area size for the menu is exactly the same size as the header size, in this case 300px no matter where the menu is positioned. This explains the default of the menu being centered by the theme.
This changes the question to, are the header and menu sizes defined together in the same div or are they separate? Either way can you save me the trouble of reading every line to find the definitions? I believe that the menu size is set to relative and that is the portion I need to edit. I would rather be sure than break it.
Hi!
I believe this is causing the issue and the large logo size.
#top #header_main > .container .main_menu ul:first-child > li > a { height: 300px!important; line-height: 300px!important; }I’m not sure if you are trying to keep the large logo with a slim header? Please remove any custom modifications and share a mockup what you are trying to do or what you need the end result to look like we will try our best to help you achieve it.
Cheers!
Vinay KashyapHi Vinay,
That is most likely the issue. I have uploaded an image with the changes here:
http://newjewelry.sonyasanchezarias.com/wp-content/uploads/2016/03/Changes.jpg
The blue was discovered using Firebug in Firefox. The red is the relational change if the blue outlined area is edited, which i am almost certain is what you found. Below is the code relating to the find, with the area in question in bold.
<div id=”header_main” class=”container_wrap container_wrap_logo”>
<div class=”container av-logo-container”>
<div class=”inner-container”>
<strong class=”logo”>
<nav class=”main_menu” itemtype=”https://schema.org/SiteNavigationElement” itemscope=”itemscope” role=”navigation” data-selectname=”Select a page”>
<div class=”avia-menu av-main-nav-wrap”>
<ul id=”avia-menu” class=”menu av-main-nav”>
<li id=”menu-item-48″ class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-top-level menu-item-top-level-1″>
<li id=”menu-item-50″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-2″>
<li id=”menu-item-421″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-top-level menu-item-top-level-3 dropdown_ul_available”>
<ul class=”sub-menu” style=”display: block; opacity: 0; visibility: hidden;”><li id=”menu-item-54″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-mega-parent menu-item-top-level menu-item-top-level-4″>
<li id=”menu-item-49″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-top-level menu-item-top-level-5″>
<li id=”menu-item-search” class=”noMobile menu-item menu-item-search-dropdown”></div>
</nav>
</div>
</div>Thank you!
PS – all custom code has been removed but the “Custom Header Size” option is still set to 300 under Header Options.
PSS – The client requires the large logo size of 300.
Hey!
We need access to your site please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.
Best regards,
Vinay KashyapDone. See private content.
There are only three plugins loaded and only two active, disable if needed.
Hey!
Sorry i missed that you had provided the info earlier… We have added the below code to quick css please review the site now.
#top #header_main > .container .main_menu ul:first-child > li.menu-item > a{ height: 100px!important; line-height: 100px!important; }Regards,
Vinay Kashyap
- The topic ‘Sub Menu Position way off’ is closed to new replies.