-
AuthorPosts
-
January 25, 2018 at 10:42 pm #903061
Hello,
1. I have integrated a secondary menu (avia2-menu) in the header “top bar at the right”. This aligns to the right on desktop and on mobile it centers. How can I achieve that it centers on (i)Pads too?I have tried several css, at least
.responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul { position: static; float:left; text-align: center; margin-top:0;
but this does not work.
2. How do I control the logo size on different devices like pads and smartphoes? My Logo is very wide.
Thanks!
Best Regards
January 26, 2018 at 8:15 am #903241Hey Sigmund,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1024px) { .responsive #header_meta .sub_menu > ul { width: 30%; } .responsive .logo img { width: 75%; } .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu { right: -30px; } }
If you need further assistance please let us know.
Best regards,
VictoriaJanuary 27, 2018 at 4:48 pm #903692Hello Victoria,
thanks, but the only thing that happens is that the search magnifier has gone in the next line on (i)Pads. No centering.Can you help?
Best Regards
January 29, 2018 at 11:42 am #904174Hello,
I have tried to get on with question 2. (logo size) of my first post, but no results. Perhaps you can help here to.Best Regards
January 30, 2018 at 7:00 am #904640Hi,
1.) Please use the following css code to center align the items.
@media only screen and (max-width: 1024px) .responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul { position: static; float: none; text-align: center; margin: 0 auto; } }
2.) Insert additional css media queries to control the size of the logo on different screen sizes.
@media only screen and (max-width: 767px) { .responsive #top .logo { height: 60px !important; width: 70%; } }
Default height value is 80px and the default width value is 80%.
Best regards,
IsmaelFebruary 2, 2018 at 4:56 pm #906906Hi,
the centering of the items still does not work. Can you take a look?Best Regards
February 4, 2018 at 8:45 am #907403Hi Sigmund,
Credentials did not work for me. Could you please update the credentials?
Best regards,
VictoriaFebruary 5, 2018 at 1:41 pm #907943Hello,
yes. On firefox responsive it looks good, but on concrete ipad device not.Best Regards
February 5, 2018 at 3:31 pm #908037Hi Sigmund,
Can you give me the password, please?
Best regards,
VictoriaFebruary 5, 2018 at 3:35 pm #908043This reply has been marked as private.February 5, 2018 at 4:08 pm #908063Hi,
Best regards,
VictoriaFebruary 5, 2018 at 4:45 pm #908086This reply has been marked as private.February 6, 2018 at 5:41 am #908352Hi,
Please try this CSS as well:
@media only screen and (max-width: 1024px) { #header_meta .sub_menu { display:table !important; } }
Best regards,
RikardFebruary 8, 2018 at 10:32 am #909669Hi Rikard,
still no change, sorry.Best
SigmundFebruary 8, 2018 at 11:21 am #909690is there a link to that site?
maybe an old html / css handmade webdesigner can help. :lolFebruary 8, 2018 at 11:54 am #909710Hi,
thanks for coming in. I can send you a link if you give me your email adresse or other contact.
Best
SigmundFebruary 8, 2018 at 1:50 pm #909760my contact you can see on my Avatar – leads to my homepage
February 9, 2018 at 9:34 am #910160well – i can not simulate it on ipad and i don’t know where your break-point to mobile view is
but i would get rid of that align center method and try to position it in this way:.av_secondary_right .sub_menu { padding-left: 0; } #avia2-menu { width: auto !important; position: relative !important; float: left !important; left: 50% !important; transform: translateX(-50%); }
can you try this and have a look to your ipad if it works the way you want
February 9, 2018 at 10:15 am #910173and on your logo – i would do it in the way to have two logos on top
you know how you did place the search in secondary logo – and your nav seems to be a different nav than the enfold one.
but here you can see how it works with two logos on top and a little shift of nav.i will send you the link
February 9, 2018 at 10:24 am #910177Hi,
thanks for your code. I have tried it, it did not work.
I am trying other things now. To be honest I dont know why this is looking good on ipad, but it does:.responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul { position: static; float: left; text-align: center; margin-top: 0; width: 100%; margin-left: 20%; }
Best
- This reply was modified 6 years, 10 months ago by Sigmund.
February 9, 2018 at 10:26 am #910178Hi,
yes, I was thinking about the 2 Logo method too. At the moment it is one very big image file with to logos in it. Thats not good. So I would appreciate your link.Best
February 9, 2018 at 10:42 am #910186Hi,
I’m sure @Guenni007 will check this thread again. Please wait for his response. :)
Best regards,
IsmaelApril 9, 2018 at 11:13 am #939065Sorry Sigmund – long time ago – did you try that ?
here is a new example with two logos – i think you like to have those logos both to the left
https://webers-testseite.de/two-logo-header/both do shrink and on responsive case they go under each other.
April 9, 2018 at 11:26 am #939076Hi and thanks for coming back. You can see the result on https://blog.hamburger-software.de. As mentioned the logo is very width.
Best RegardsApril 9, 2018 at 12:00 pm #939104yes but these are one logo
first you have to split it into two separate logos –
try to get same outer dimensions – best will be if the height is the samesee link above with your logos-
now i have placed the update logo in the center – on scrolling it goes to the left
but i will see if it is possible to take the shrink calculation to have that the shrinking way not on reaching the header-scrolledApril 9, 2018 at 12:12 pm #939115ich schreib jetzt mal deutsch – geht mir besser damit.
Momentan teste ich das mit dem shrink event zu verknüpfen.
Also beide logos sind momentan links – soll sich aber ändern.April 9, 2018 at 1:37 pm #939169so now have a look at: https://webers-testseite.de/two-logo-header/
If this meets your needs, I’ll be happy to describe how it works
April 9, 2018 at 2:11 pm #939220Yes, that look good! I would be happy about a description.
- This reply was modified 6 years, 8 months ago by Sigmund.
April 9, 2018 at 2:58 pm #939249kann ich hier deutsch schreiben ?
1. download von pastebin : https://pastebin.com/dl/CHZuH4hA
2. umbenennen nach shrink_fix.js
3. in deinem child-theme einen ordner erstellen js ,
4. das file shrink_fix.js in diesen ordner hochladen.
5. das folgende in die functions.php des child-themes:
a) Laden der neuen Header-Height funktion:function include_shrink_fix() { wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/shrink_fix.js', array('jquery', 'avia-default'), 2, true ); } add_action( 'wp_enqueue_scripts', 'include_shrink_fix', 100 );
b) zwei neue Logos setzen, und später wird das in Enfold gesetzte Logo ausgeblendet
Pfade, Namen und ggf Link des zweiten logos anpassen !function add_logos($logo) { $logo .= '<span class="logo first-logo"><a href="/">' ; $logo .= '<img src="/wp-content/uploads/hs-logo.jpg"/>'; $logo .= '</a></span>'; $logo .= '<span class="logo second-logo"><a href="https://url-nach-draussen" target="_blank">' ; $logo .= '<img src="/wp-content/uploads/update-logo.jpg"/>'; $logo .= '</a></span>'; } return $logo; add_filter('avf_logo_final_output', 'add_logos');
das ins quick css:
.logo:first-child, .responsive .logo:first-child img{ display: none } .responsive #top .logo { height: inherit !important; position: relative} .logo.first-logo { z-index: 3} .logo.second-logo { z-index: 3} .logo.second-logo {37%} .logo.second-logo a {float: left} .logo.first-logo img, .logo.second-logo img {display: block} @media only screen and (max-width: 990px) { div .logo {position: relative !important;} .responsive .logo.second-logo a {float: left; margin-left: 0px !important } .logo.first-logo img, .logo.second-logo img{ max-width: 250px} } @media only screen and (max-width: 768px) { .logo.second-logo { left: 3% !important } } @media only screen and (max-width: 468px) { .logo.first-logo img, .logo.second-logo img{ max-width: 200px} .logo.second-logo { left: 0 !important } }
die Anweisung mit dem Z-index ist hier nicht nötig. War bei drei Logos mit einem in der mitte nützlich. – kann also weg
Es werden sicherlich noch Anpassungen dann nötig sein; zB weil ich in der Testseite eine ander Header Höhe hatte.
Eventuell downloadest du die Logos von meiner Seite :
logo first-logo
logo second-logoApril 9, 2018 at 6:58 pm #939353Very cool, thank you!
-
AuthorPosts
- The topic ‘secondary menu and Logo on iPad’ is closed to new replies.