-
AuthorPosts
-
June 19, 2015 at 5:24 am #461670
When scrolling, there is a point where the logo and menu fall below the bottom edge of the header. You can see it in the image here:
http://screencast.com/t/K8laBVXFWe’re looking good when scrolling further down and when at the top. it’s just occurring in one point of the scroll.
Thoughts on how to resolve?
Many thanks.
June 19, 2015 at 4:05 pm #462011Hey Greg!
Please remove following codes from your custom CSS
#top .main_menu .menu { position: relative; top: 120px; } #top .main_menu .menu > li > a { height: 50px !important; line-height: 50px !important; }
Then post a screenshot and show the changes you would like to make
Cheers!
YigitJune 19, 2015 at 4:38 pm #462039Hi Yigit,
I removed the CSS. Disregarding the font Here is what we are looking to accomplish:
A) We’re looking to move the menu and logo closer to the multi-colored line. (disregarding the font difference, please refer to the first screenshot below for an example of the spacing).
http://screencast.com/t/0MOfmH9vI
B) Also, the sub menu should reside just below the main menu. You can see the current large gap in #2 in the second screenshot below.
C) Lastly, as we scroll, the logo (the menu is fine now with the removal of the CSS but if we move it down it may also have this issue) falls down below the bottom of the header (multi-colored line). See #1 in the screenshot below.
http://screencast.com/t/G22FEtA6FIPI
Many thanks for your help.
June 22, 2015 at 9:56 am #462517Hey!
A) Control the position of your menu with this code:
nav.main_menu { top: 46px; }
B) Use this to control position of sub menu:
ul.children { top: 117px; }
C) Would be quite difficult to control the changing of logo shrinking as it is hard coded, but I suggest to use a png24 image file with transparent background, instead of a jpg image with white background.
Hope this helps.
Cheers!
AndyJuly 2, 2015 at 2:10 am #467310Great. Thank you. Sorry too for the slow response.
Here’s what I used:
nav.main_menu { top: 46px; }
ul.children { top: 117px; }
And when the heading shrinks when scrolling:
.header-scrolled nav.main_menu { top: 46px; }
.header-scrolled ul.children { top: 117px; }
July 6, 2015 at 10:25 am #468762Hi!
alright, thanks for sharing. Let us know, if you have some more questions or issues related to the theme. We are happy to assist you.
Regards,
AndyMarch 3, 2017 at 11:14 am #754973Hi,
I have logo set to centre and menu below. What i need to achieve is to change the position when scroll/sticky header to:
menu = left
logo= rightCan this be done?
Thanks in advance
March 3, 2017 at 2:28 pm #755065Hi,
That may not be possible or might take a lot of time but would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to let you know if that’s possible.
Best regards,
VinayMarch 3, 2017 at 3:04 pm #755097It’s http://www.cyprusaware.eu
- This reply was modified 7 years, 9 months ago by mike.rav.
March 8, 2017 at 12:55 pm #757745Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width:767px) { #advanced_menu_toggle, #advanced_menu_hide { left: 0; right:auto!important; } .responsive #top .logo { float: right!important; }}
Best regards,
VinayMarch 9, 2017 at 8:52 am #758224Hi,
I added the css you provided but nothing changed. Please note that we would like this change to be done to desktop version and not responsive view.
Thanks
March 14, 2017 at 12:11 pm #760644Hi,
then try Vinay’s code without media queries:
#advanced_menu_toggle, #advanced_menu_hide { left: 0; right:auto!important; } .responsive #top .logo { float: right!important; }
Best regards,
AndyMarch 14, 2017 at 1:12 pm #760686Hi,
I added it. Still nothing happens.
Thanks
March 19, 2017 at 2:14 pm #763190Hi,
I’m not sure why it’s not working for you. But when we test the code in the editor it does affects the menu and the logo position in the mobile view.
It may not be working for you because of caching issue. Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.
Disable any caching plugins if they are active to preview changes.
Best regards,
VinayMarch 20, 2017 at 8:56 am #763526Hi,
Please note that i do not want to do any changes in responsive mode. What i am saying in my initial description is the following:
I have logo set to centre and menu below. What i need to achieve is to change the position when
- scroll/sticky header
to:
menu = left
logo= rightCan this be done?
Thanks
- This reply was modified 7 years, 9 months ago by mike.rav.
March 21, 2017 at 8:08 pm #764334Hi george,
Try this adjustment. Notice though, the menu does not become the burger menu since it’s normal screen mode.
.responsive #top .header-scrolled.header-scrolled-full .main_menu { text-align: left; } .responsive #top .header-scrolled.header-scrolled-full .logo { left: 90%; }
Is this what you’re trying to achieve?
Best regards,
Victoria- This reply was modified 7 years, 9 months ago by Victoria.
March 22, 2017 at 9:03 am #764653Hi,
I tried the styles you provided. Logo goes on the right side correctly when the header is sticky. The menu also goes left but i would like it in the same row as the logo. Currently it is just moved on the left side in the same row it was before.
Thanks
March 24, 2017 at 2:00 pm #766164Hi,
it’s not clear to me what you want to achieve. Can you provide us a screenshot/mockup showing the results you want to achieve please? use imgur.com or dropbox.
Best regards,
AndyMarch 24, 2017 at 2:19 pm #766188I am providing one screenshot of how it looks on sticky header now:
https://www.dropbox.com/s/m9qibza04jm65c3/current_version.jpg?dl=0and one screenshot of how we want it to look:
https://www.dropbox.com/s/7s03lmcs8mqv14j/required_version.jpg?dl=0Thanks
March 27, 2017 at 11:34 am #767344Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.