Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 16, 2018 at 12:14 am #997723
    entrepreneur41

    Hi, I’m using an SVG logo, which is working perfectly on full-size desktop. But on mobile screens and tablets the logo changes margin, moves to the middle of the screen and covers up the menu. See attached screenshots. I’ve also provided a login to our staging site; feel free to jump in if it’s easier.

    Can you please help? Thanks!

    August 16, 2018 at 8:14 am #997840
    Ismael

    Hey entrepreneur41,

    Thank you for using Enfold.

    The color of burger/mobile menu is the same as the header background. It’s white. Please use this css code to change the mobile menu color.

    @media only screen and (max-width: 767px) {
.header_color div .av-hamburger-inner, .header_color div .av-hamburger-inner::before, .header_color div .av-hamburger-inner::after {
    background-color: green;
}
}

    You can also set the mobile menu to display on tablet screens. Go to the Enfold > Main Menu > General panel and then set the “Menu Items for mobile” to the second option.

    Best regards,
    Ismael

    August 16, 2018 at 2:21 pm #997944
    entrepreneur41

    hey Ismael, thanks and apologies for missing the Main Menu settings; I never saw it before!

    what can we do for the logo on tablet/mobile? if you look, it’s neither centered nor left offset. It’s just sort of hovering in no man’s land.

    One other question as well: on the desktop main menu links, I need a separator between two and only items (the language switcher), e.g.,

    ITEM ITEM ITEM ITEM | EN FR

    So two questions:

    1) Mobile/tablet logo alignment
    2) Language switcher separator in the main menu

    thanks very much

    August 17, 2018 at 4:33 am #998234
    Ismael

    Hi,

    Thank you for the update.

    1.) Use this css code to pull the logo towards the left of the header.

    @media only screen and (max-width: 989px) {
    .responsive .logo img {
        left: -60px;
        right: auto;
    }

    .responsive .logo {
        margin-top: 13px;
    }
}

    2.) How did you add the language switcher?

    3.) The burger menu is not visible on tablet screens. You have to adjust the max-width value of the above css media query from 767px to 989px.

    Best regards,
    Ismael3

    August 17, 2018 at 10:52 am #998359
    Guenni007

    and by the way on default i think svgs allways shrink to the center when surrounding container gets smaller.

    But you could set a different behavior on the svg code itself ( open with a good editor like sublime-text on OSX or notepad++ for windows)
    you see the header of the svg – f.e.:

    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Webdesign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 570 200" enable-background="new 0 0 570 200"  xml:space="preserve">

    before that space preserve you can add : preserveAspectRatio=”xMinYMin meet” so that there is:
    Link : https://developer.mozilla.org/de/docs/Web/SVG/Attribute/preserveAspectRatio

    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Webdesign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 570 200" enable-background="new 0 0 570 200" preserveAspectRatio="xMinYMin meet" xml:space="preserve">

    xMinYmin – means it shrinks to the left top
    xMinYmax – means it shrinks to the left bottom etc. etc.

    options are Min , Mid, Max

    you can see it here : https://webers-testseite.de/wp-content/uploads/webers-webdesign.svg and difference to :
    https://webers-testseite.de/wp-content/uploads/webers-webdesign2.svg
    shrink the height of your browser window on both links and see

    August 22, 2018 at 4:26 pm #1000419
    entrepreneur41
    This reply has been marked as private.
    August 23, 2018 at 7:29 am #1000586
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - logo fix */


.responsive #top #header .logo img {
left:50%;
transform:translateX(-50%);
}

@media only screen and (max-width:767px) {
    .logo {
        max-width: 150px;
    }
}

    Best regards,
    Vinay

    March 2, 2021 at 8:06 pm #1284866
    webdesignphx

    Günni, I like your examples please help me where to put the code you wrote:

    <?xml version=”1.0″ encoding=”utf-8″?>
    <svg version=”1.1″ id=”Webdesign” xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; x=”0px” y=”0px”
    viewBox=”0 0 570 200″ enable-background=”new 0 0 570 200″ preserveAspectRatio=”xMinYMin meet” xml:space=”preserve”>

    does that go in the css editor or in the functions php or somewhere else.
    I have the same problem on https://www.webdesign-phoenix.com

    Thanks
    Tina

    March 10, 2021 at 1:03 pm #1287082
    Yigit

    Hi Tina,

    Thanks for contacting us!

    Please add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 480px) {
.logo img {
max-width: 200px;
}}

    If that does not help or if you need further assistance, please start a new thread under Enfold sub forum and we will gladly look into it :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘SVG Logo misaligning and covering menu on mobile and tablet’ is closed to new replies.