Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 13, 2020 at 10:12 am #1237320
    resting-jeppesen

    Hi! I have two problems:

    1) Menu
    1.1) Is there a way to decrease the gap between the menu text and the line that appears under it on hover? The gap is too wide right now.
    1.2) Also, the drop down menu is equally too far down, so can I decrease that gap too or ideally completely remove it because when the drop down menu appears there shouldn’t even be a gap at all.

    2) Grid row
    2.1) I’ve created a grid row and on desktop it’s vertically centered but on mobile view it’s all the way at the top. How can I center the content vertically on mobile view?

    Thanks in advance! :)

    • This topic was modified 4 years, 4 months ago by resting-jeppesen. Reason: Managed to fix some of it myself. Edited to reflect current problem
    August 17, 2020 at 3:45 pm #1238508
    resting-jeppesen

    Can no one help? =/

    August 19, 2020 at 11:05 pm #1239323
    Yigit

    Hi,

    Sorry for the late reply!

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

    
#top .av_header_transparency .avia-menu-fx {
    bottom: 35%;
}
#header .avia_mega_div {
     top: 64%; 
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #mob-center.av-flex-cells .no_margin {
    display: flex;
    align-items: center;
}}

    One code for each question :) To make sure 2.1 only applies to the grid row on your page, I edited it and gave it “mob-center” ID.

    Please review your website :)

    Best regards,
    Yigit

    • This reply was modified 4 years, 3 months ago by Yigit. Reason: added missing closing curly bracket
    August 25, 2020 at 10:07 am #1240620
    resting-jeppesen

    Thanks for the reply! :) Everything seemed to work but this part:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #mob-center.av-flex-cells .no_margin {
    display: flex;
    align-items: center;
}

    It affected my font choices. Overwrote what it said in advanced styling for some reason. Do you know why? Is there a way to correct the code to not affect anything else but the grid row?

    August 28, 2020 at 6:04 pm #1241666
    Yigit

    Hi,

    I noticed a closing curly bracket is missing, please use the code as following

    

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #mob-center.av-flex-cells .no_margin {
    display: flex;
    align-items: center;
}}

    Best regards,
    Yigit

    August 31, 2020 at 1:09 pm #1242166
    resting-jeppesen

    Oh you’re right! Now it works perfectly! Nice catch. Thanks a lot :D

    September 1, 2020 at 12:36 am #1242322
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    September 1, 2020 at 10:15 am #1242459
    resting-jeppesen

    You may close it. :) Thanks!

    September 1, 2020 at 11:13 am #1242477
    Nikko

    Hi resting-jeppesen,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Styling the menu + grid row content not centered on mobile view’ is closed to new replies.