-
AuthorPosts
-
June 19, 2020 at 2:17 pm #1224065
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;
}- This topic was modified 4 years, 4 months ago by BrandEntourage.
June 19, 2020 at 9:08 pm #1224160Hey Brand,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaJune 20, 2020 at 10:57 am #1224251I’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 hereJune 28, 2020 at 1:43 pm #1226209Hi,
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,
MikeJuly 3, 2020 at 5:23 am #1227625Hi 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.
- This reply was modified 4 years, 4 months ago by BrandEntourage.
July 3, 2020 at 6:00 am #1227635Hi,
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 ShannonJuly 3, 2020 at 6:52 am #1227663okay 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 #1227680Hi,
No problem. please let us know if it works out.
Best regards,
Jordan ShannonJuly 3, 2020 at 8:45 am #1227702it works prefect.
Thank you so much guys!!!!- This reply was modified 4 years, 4 months ago by BrandEntourage.
July 3, 2020 at 1:24 pm #1227755Hi,
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 -
AuthorPosts
- The topic ‘Socket Menu Spacing’ is closed to new replies.