Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 9, 2017 at 9:22 pm #790606
    spidercreations

    Thanks again for making a theme I depend on and keep buying. Three issues I’m working to resolve with CSS, but having difficulty.

    First, we’d like to move the three social media icons I’ve got in the navigation menu over to the right next to the search icon. Keep them side-by-side, just right justified with the search icon.

    Second, on the homepage, there is a Color Section that includes two rows. The second row only has two 1/3 column elements. I’m struggling to figure out how to center those two columns since they are only 1/3. Want to keep them 1/3 size to match the row just above in the same Color Section.

    Third, in the footer, the navigation menu I have down there is shoved a bit over to the right and not centered.

    Providing link to website along with login below.

    Thanks in advance!

    May 10, 2017 at 5:50 am #790838
    Rikard

    Hey spidercreations,

    1. Please try this in Quick CSS

    .html_header_top.html_bottom_nav_header #top .main_menu .menu-item-search-dropdown {
    float: left !important;
}

    2. Is it the section with 5 icons + text you are referring to? Maybe it would be better to put them in 1/2 elements instead and add some padding to them if you want them to be more narrow?

    3. I’m not sure how you added that, maybe you could simply decrease the font size a bit in order to display them all?

    Best regards,
    Rikard

    May 10, 2017 at 3:00 pm #791127
    spidercreations

    Thank you. The CSS for the first request simply pushed the search icon over to the left next to the social media icons.
    We’d like to have the three individual social media icons and the search icon RIGHT justified, with the rest of the menu as it is now. See attached image in the private content area.

    For the home page, yes … I’ve attached a screen shot of what we are looking for. Maybe that clarifies what we are looking for? Open to ideas as to how to center a couple of columns when they are smaller widths. I thought I had found some instructions on Kriesi.at on how to do this, but can not located now.

    For the footer, we actually added a new menu into the footer.php area and styled it, but we can not seem to get it to be centered. In a computer browser, the menu is showing all of the nav elements, it’s just that it is pushed over to the right a bit and not centered. Also – as you’ve pointed out to me – it’s not working properly when the screen width is reduced. After centering, I’m tempted to just hide it on narrow screens.

    I realize this may be beyond the scope of normal support, and if that is the case, that’s OK. I appreciate any help you can provide, but will understand if this is beyond your scope.

    Steve

    May 12, 2017 at 6:57 am #792090
    Ismael

    Hi,

    Please add the following css code to move the social icons.

    #menu-item-44, #menu-item-50, #menu-item-51, #menu-item-search {
    position: absolute;
}

#menu-item-search {
    right: 0px;
}

#menu-item-51 {
    right: 43px;
}

#menu-item-50 {
    right: 86px;
}

#menu-item-44 {
    right: 129px;
}

    For the columns, try this one:

    #av_section_1 .av_one_third:nth-child(4) {
    margin-left: 16%;
}

    If you don’t want to use a generic selector, turn on the custom css class field.

    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    May 12, 2017 at 9:02 pm #792493
    spidercreations

    Much appreciated. I still have to figure out the menu in the socket, but I’ll keep working on it.

    Steve

    May 12, 2017 at 10:48 pm #792534
    spidercreations

    To follow up… This is what I did to get the menu in the socket area…

    https://kriesi.at/support/topic/footer-menu-in-the-socket/

    It works, but it’s off center. Possibly due to having too many items in the list.

    So, trying to get it centered is still an issue, plus I would like to hide the menu below a specific width if possible.

    Steve

    May 14, 2017 at 1:44 pm #792920
    Sarah

    Hi!

    Your menu looks a little off center because the last menu item doesn’t have a padding on the right. This is intentional for the usual right-aligned menu, so that the menu text is right-aligned with the content text. But since your menu is in the center, you need to add a padding, or remove the left-padding of your first menu item.

    Please try this code that adds padding to the right of the last menu item:

    #socket .sub_menu_socket li:last-child {padding-right:10px;}

    And then for hiding the menu below a specific width, please try this code:

    @media screen and (max-width: 768px) {
.sub_menu_socket {display:none !important;}
}

    Please adjust the max-width to fit your preference. Here is a good reference for media queries of standard devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Please let us know if you need further help.

    Best regards,
    Sarah

    May 14, 2017 at 3:57 pm #792967
    spidercreations

    Thank you! Much better.

    May 14, 2017 at 5:42 pm #793013
    Victoria

    Hi spidercreations,

    Glad you got it working for you! :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.