Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 19, 2020 at 2:17 pm #1224065
    BrandEntourage

    Hello,

    I have my menu in the socket of my site to the far right.
    I also have my logo on the left in svg format.
    I want to decrease the space between the menu items so I can have my four menu items inline.

    I think the code used to create my menu & logo is not allowing the 4 menu items to not be responsive on iPhone 6 screen sizes and below.
    I know its not many phones that small these days but still.

    My Site can be view here
    Below is the code I’m currently using to insert the svg image of my logo in the socket left side.

    <img src="http://www.downundermusic.com/wp-content/uploads/2020/05/downunder_white.svg" /> <! [nolink]
#socket .copyright {
    width: 100%;
}

    Below is the code used to sticky the socket, control the height and control the logo size.

    #socket img {
    width: 153px;
    }

    #socket {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 10000!important;
    }

    #socket .container {
    padding-top: 10px;
    padding-bottom: 01px;
    }

    June 19, 2020 at 9:08 pm #1224160
    Victoria

    Hey Brand,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    June 20, 2020 at 10:57 am #1224251
    BrandEntourage

    I’ve changed the code used. please see below.

    #socket img {
    width: 150px;
    }

    #socket {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 10000!important;
    }

    The menu items are not inline. The CONTACT menu item sits under the logo but I want it on the same line as the other menu items.
    see the current look here

    June 28, 2020 at 1:43 pm #1226209
    Mike

    Hi,
    Sorry for the late reply, and thanks for the link & screenshot. I find that the CONTACT menu item is inline with the other menu items when the screen is at least 359px wide, so when the screen is smaller, such as with a iPhone 5 or SE.
    So to correct we will use this css to set the socket width to 99% so there is enough room for the menu items.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 359px) { 
#socket > .container {
	margin: 0 !important;
	padding: 0 !important;
	width: 99% !important;
    max-width: 99% !important;
}
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    July 3, 2020 at 5:23 am #1227625
    BrandEntourage

    Hi Mike,

    thanks for the code but I’m still getting the same result.
    any ideas?

    is there code to decrease the spacing between the menu items? maybe that might work.

    July 3, 2020 at 6:00 am #1227635
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    July 3, 2020 at 6:52 am #1227663
    BrandEntourage

    okay that seems to be working on my iPad and phone.
    I need to see what this looks like on iPhone SE screen size to make sure the menu is responsive now.

    thank you

    July 3, 2020 at 7:23 am #1227680
    Jordan Shannon

    Hi,

    No problem. please let us know if it works out.

    Best regards,
    Jordan Shannon

    July 3, 2020 at 8:45 am #1227702
    BrandEntourage

    it works prefect.
    Thank you so much guys!!!!

    July 3, 2020 at 1:24 pm #1227755
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Socket Menu Spacing’ is closed to new replies.