Tagged: menu
-
AuthorPosts
-
November 3, 2015 at 6:31 pm #529554
Hi there,
I would like to modify the menu layout in order to have:
1. no logo
2. an icon instead of home
3. elements centered and equally distributed on the bar (responsive)I solved 1. using
div .logo { display: none; }
and 2. placing an
<img />
as menu element label
Still not able to make 3. work.
Can you please give hints on that?
thanks in advance!- This topic was modified 9 years ago by T_Architect88-2015.
November 4, 2015 at 5:02 pm #530235Hi T_Architect88-2015!
you can center your menu with this code in Quick CSS field:
.avia-menu.av-main-nav-wrap { margin-right: 180px; }
Adjust as needed.
Best regards,
AndyNovember 4, 2015 at 6:54 pm #530356Hi Andy,
thanks for the fast reply.
I tried the provided code and it is resolving the issue only partly.
In fact, changing the browser window size / screen resolution, the menu is not keeping the centered position anymore. Sometimes is even distributed on more lines. (see image)
I would like to keep the alignment of the menu centered on every browser/screen size (except for mobile).
I hope there is a solution for that.November 5, 2015 at 9:33 pm #531200Hi!
try this code instead:
.avia-menu.av-main-nav-wrap { left: -50%; }
and adjust if needed.
Best regards,
AndyNovember 6, 2015 at 9:48 am #531373Thanks but still not working… same as before: I can adjust the % and have a good alignment in current browser window but I’m losing it when browser window changes. I would like to have a responsive solution, in order to have the menu always center aligned.
November 6, 2015 at 2:17 pm #531444Hey!
the solution with % is providing you exactly that: a responsive solution. With % menu does not have a fix value like with px. It works fine for me, as seen here:
Clear browser cache and hard refresh a few times.
Regards,
Andy- This reply was modified 9 years ago by Andy.
November 7, 2015 at 9:43 am #531814Hi Andy,
I used the code with percentage, I had to use -115% to have it aligned on my screen. Unfortunately the menu is still losing the centered alignment once I change the window size. You can see this behavior at lindemanngroup.com/home
I place below the style.css used in my child theme, maybe there is something wrong there… can you please have a look ?
Thanks in advanceif(!is_admin()) add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100, 1); function avia_register_child_frontend_scripts() { $child_theme_url = get_stylesheet_directory_uri(); //dequeue default scripts wp_dequeue_script('avia-popup'); wp_enqueue_script( 'avia-popup', $child_theme_url .'/js/jquery.magnific-popup.min.js', array('jquery'), 2, true); } /*SLIDESHOW CAPTION POSITION*/ .slideshow_align_caption { display: table-cell; vertical-align: middle; position: relative; } /*SLIDESHOW CAPTION FONT WEIGHT*/ .avia_transform .av_fullscreen .active-slide .avia-caption-title { font-weight: 300 !important; } .avia_transform .av_fullscreen .active-slide .avia-caption-content { font-weight: 300 !important; } /*LOGO ALIGNMENTO TO CENTER*/ .avia-menu.av-main-nav-wrap { left: -50%; } /*MENU LOGO*/ div .logo { display: none; } /*MENU FONT*/ .main_menu ul:first-child > li > a { font-size: 16px; font-weight:300; } /*MENU FONT HIGHLIGHT COLOR*/ .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #bbbbbb; } /*MENU TRANSPARENCY*/ #top .header_color .header_bg, #header_main { background-color: rgba(255,255,255,0.75); } /*MENU BORDER BOTTOM VISIBLE WHEN SCROLLING*/ #header_main { border-bottom-style: solid; border-bottom-width: 1px; border-color: #e1e1e1; margin-bottom: -1px; } /*TOP BAR TRANSPARENCY*/ .header_color .container_wrap_meta { background-color: rgba(2242,242,242,0.2); } /*TOP BAR FONT*/ .sub_menu>ul>li>a, .sub_menu>div>ul>li>a { text-decoration: none; font-weight: 500; font-size: 12px; padding: 7px 0; } /*MASONRY BACKGROUND*/ .av-masonry-container { width: 100.4%; float: left; clear: both; background: #ffffff !important; position: relative; } .main_color .av-masonry { background: #ffffff !important; } .av-large-gap .av-masonry-sort { margin: 0 15px 15px 0; background: #ffffff !important; } /*MASONRY CAPTION BACKGROUND*/ .main_color .avia-arrow { background-color: #f2f2f2; } .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content { background-color: #f2f2f2; } /*MASONRY LOAD MORE BTN*/ .main_color .av-masonry-pagination { background-color: #f2f2f2 !important; } .main_color .av-masonry-pagination:hover { background-color: #f8f8f8 !important; } /*ICONS + CIRLE*/ .av_font_icon.av-icon-style-border .av-icon-char { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; font-size: 50px !important; line-height: 70px !important; width: 70px !important; border-radius: 500px; border-width: 2px; border-style: solid; display: block; margin: 0 auto; padding: 30px; color: inherit; border-color: inherit; position: relative; } /*ARCHITIZER HOVER COLORS*/ #top #wrap_all .av-social-link-architizer:hover a{color:#ffffff; background-color:#00a0fc; } #top #wrap_all .av-social-link-houzz:hover a{color:#ffffff; background-color:#7cc04d; } /*HOT SPOT CUSTOMIZATION*/ .av-hotspot-container .av-image-hotspot_inner { color: #1c9bb7; } .responsive .av-image-hotspot{ height: 15px; width: 15px; line-height: 15px; } .responsive .av-image-hotspot-pulse { width: 39px; height: 39px; line-height: 15px; top: -12px; left: -12px; }
November 9, 2015 at 10:47 am #532455Hey!
putting all your css code in here does not help us at all. If you want to make sure that your css code does not cause any issue, then simply remove it completely and check if things get better for you (don’t forget to clear browser cache afterwards + hard refresh).
It was working for me, when I implemented the code, as shown in my screenshots. However, send us admin access, so we can have a deeper look into it. Post login details here as private reply.
Regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.