Tagged: , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 5, 2015 at 1:14 pm #483287
    Morticka

    Hi guys,

    I followed the instructions for a widget area in the header:

    add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }

    Then I aligned them with CSS:

    #header .widget {
    float: center;
    left: auto;
    line-height: 5px !important;
    position: relative;
    right: -600px;
    top: 10px;
    z-index: 9999;
    }

    But now the Main Menu links do not work anymore and on mobile the hamburger menu is not aligned anymore on the top.

    How can I fix this?

    Sincerely,
    Morticka

    August 5, 2015 at 5:03 pm #483493
    Elliott

    Hi Morticka!

    You have them laid out on top of your main menu so the links will not be clickable. Your trying to center them correct? Try this CSS out instead.

    #header .widget {
  left: 50%;
  line-height: 5px !important;
  position: absolute;
  top: -63px;
  transform: translate(-50%);
  z-index: 9999;
}

    Best regards,
    Elliott

    August 5, 2015 at 7:37 pm #483547
    Morticka

    Hey Elliot,

    Yes, I was able to align them the way I wanted it using your code, thank you! :)

    One more question: The header widget does not look good on mobile, it’s almost on top of the logo. Is there a way to show the widget only on desktop and not on mobile?

    Sincerely,
    Morticka

    August 5, 2015 at 7:45 pm #483553
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
#header .widget { display: none !important; }}

    Cheers!
    Yigit

    August 6, 2015 at 1:06 pm #483834
    Morticka

    Great, thx Yigit! I removed it from mobile and iPad portrait mode. But on the iPad in landscape mode the widget lies on top of the menu. Is there a way to make the header widget responsive?

    Sincerely,
    Barb

    August 6, 2015 at 1:24 pm #483841
    Yigit

    Hey Barb!

    When i resized the browser window i could not reproduce the issue. Can you please post a screenshot and show? :)

    Regards,
    Yigit

    August 6, 2015 at 1:48 pm #483858
    Morticka

    Hi Yigit,

    Never mind, I’ve removed the header widget and I’m using Enfolds Social Icons in the header! Looks better that way too :D.

    Is there however a way to display Enfolds social icons in the mobile menu?

    Sincerely,
    Barb

    August 6, 2015 at 1:55 pm #483861
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 990px) {
ul.social_bookmarks {
    display: block!important;
}}
@media only screen and (max-width: 767px) {
ul.social_bookmarks {
    position: absolute!important;
}}

    Cheers!
    Yigit

    August 6, 2015 at 2:00 pm #483865
    Morticka

    Awesome Yigit!! :D

    How can I make them only bigger on mobile and move them a little to the left and have more space between them?

    Sincerely,
    Barb

    August 6, 2015 at 2:11 pm #483873
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 990px) {
#top .social_bookmarks li a {
    font-size: 30px;
}
#top .social_bookmarks li {
    margin-right: 15px;
}
ul.social_bookmarks { 
right: 100px !important;
}}

    Best regards,
    Yigit

    August 6, 2015 at 2:18 pm #483879
    Morticka

    Perfect, thx Yigit! You can close this topic :D

    Sincerely,
    Barb

    August 6, 2015 at 2:21 pm #483881
    Yigit

    Hey!

    You are welcome Barb :) Have a great rest of the day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Header widget menu and mobile problems’ is closed to new replies.