Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 23, 2020 at 2:25 pm #1240083
    dbideaz

    Hi guys,

    I have created a website using the enfold theme which supposed to look like http://www.sekta.co.za. My site is on http://www.primenet.co.za and I have the following issue:

    My vertical menu social icons are note matching the sekta.co.za positioning. I want my social media icons to be at the bottom of the menu(screen) and to stay like this when site is seen on different screen resolutions. At the moment on larger monitors the social icons move up and they don’t stay at the bottom. I have used the following CSS in order to get the current possitioning:

    .html_header_sidebar #top #header {
    width: 84px;
    height: 100%;
    }
    .html_header_left #main {
    margin-left: 84px;
    height: 100%;
    }
    li#menu-item-11{
    padding: 126px 3px 141px 3px;
    }

    I have created the social icons like buttons in the menu. Let me know what CSS I can use and how to get the desired look. Its also possible to use standard social media options in Enfold but If i can have the icons on new row under each other.

    August 27, 2020 at 4:41 pm #1241259
    Ismael

    Hey dbideaz,

    Thank you for the inquiry.

    Have you tried adjusting the bottom padding of the first menu item?

    #menu-item-11 {
	padding: 126px 3px 361px 3px;
}

    Or we can use flexbox to control the size of the menu items.

    .html_header_sidebar .container_wrap {
	width: 100%;
	height: 100%;
}

.html_header_sidebar #header .container {
	height: 100%;
}

.html_header_sidebar #header .av-main-nav {
	display: flex;
	flex-direction: column;
}

.html_header_sidebar #header .av-main-nav, .html_header_sidebar #header .av-main-nav-wrap {
	width: 100%;
	height: 100%;
}

.html_header_sidebar #header .av-main-nav > #menu-item-11 {
	height: 70%;
}

    The very last css declaration defines the height of the first menu item.

    Best regards,
    Ismael

    August 28, 2020 at 6:17 am #1241405
    dbideaz

    Hi Ismael,

    thank you for the reply. I have tried before

    #menu-item-11 {
    padding: 126px 3px 361px 3px;
    }

    to adjust the bottom padding. It pushes down the social media menu icons but they disappear on smaller screens. I also trued the flexbox that you sent me and its also not changing it they way i need it. You can have a look at it at http://www.primenet.co.za.
    I am thinking of removing the social media menu items and use them as social media but I need them to be in 3 rows(under each other) instead of next to each other and to control the colour. Can you assist with this?

    August 31, 2020 at 2:59 pm #1242197
    Ismael

    Hi,

    Sorry for the delay. We added the following css code to make the burger menu take most of the space in the sidebar and push the social icons further to the bottom.

    .html_header_sidebar #header .av-main-nav > li:nth-child(1) {
	flex: 0 1 calc(100vh - 310px);
}

#menu-item-11 > a {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

    Best regards,
    Ismael

    August 31, 2020 at 5:28 pm #1242257
    dbideaz

    Thank Ismael,
    its working as I wanted to be!

    August 31, 2020 at 10:34 pm #1242299
    Jordan Shannon

    Hi,

    I’m glad this was resolved if you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Vertical Menu Alignement’ is closed to new replies.