Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 30, 2015 at 1:59 pm #527363
    handelsmann

    Hey guys,

    worked with Josue to have a logo in the main navigation here
    https://kriesi.at/support/topic/center-logo-in-navgation-and-hover-the-pics-like-in-eunoia-2/

    and the problem is, that the navigation bar takes a line break for iPad or two menue points disappear completely at a size of around 700px

    Can I somehow fix that?

    Thanks Stephan

    October 31, 2015 at 11:43 pm #528012
    Josue

    Hey Stephan!

    Are you referring to this issue – http://screencast.com/t/lLJfRL03? if so, this should fix it:

    @media only screen and (max-width: 767px) {
    .responsive.html_header_top #header_main .social_bookmarks {
        right: 120px;
    }
}

    Cheers!
    Josue

    November 2, 2015 at 9:15 pm #528799
    handelsmann

    Hi Josue,

    that seems to work for social media! Thank you.

    No – what I was referring to was the fact I attached in the picture below.

    Hope you can see it.

    Best Stephan

    November 2, 2015 at 11:29 pm #528879
    Basilis

    Hey!

    That is from the admin bar of WordPress and not from our theme…

    Regards,
    Basilis

    November 4, 2015 at 3:35 pm #530078
    handelsmann

    Hey Basils,

    thank you for coming back. What do you mean it is from wordpress? So a theme is responsive but the wordpress structure doesnt allow that? Don’t understand that relationship. What has the admin bar to do with the navigation bar?????
    Isnt it that the navigation bar becomes smaller until it becomes that menue for mobile?
    Thanks for your support.
    Stephan

    November 4, 2015 at 3:42 pm #530088
    Yigit

    Hey!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 1024px) {
.av-main-nav > li > a {
    font-size: 14px!important;
}
li#menu-item-615 a {
    padding: 0;
}
#header .container {
    padding: 0;
}}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Regards,
    Yigit

    November 5, 2015 at 12:51 pm #530735
    handelsmann

    You are some kind of a genius.

    What does it mean overall – you give the list elements a fixed seize? Why is that padding 0 important for the list and the container itself and what does @media do in general?

    Thank you so much Yigit.

    November 6, 2015 at 11:24 am #531394
    Josue

    Here’s Yigit’s code commented for better understanding:

    @media only screen and (max-width: 1024px) { /* Applies only when the window is 1024px wide or less */
	.av-main-nav > li > a { /* Targets all links element within the menu */
	    font-size: 14px!important; /* Reduces font size to 14px */
	}
	li#menu-item-615 a { /* Targets logo menu item, in the center */
	    padding: 0; /* Removes its padding */
	}
	#header .container { /* Targets header inner container */
	    padding: 0; /* Removes paddings at the sides */
	}
}

    The idea is to reduce the overall spacing and size when the screen width reaches 1024px or less.

    Best regards,
    Josue

    November 7, 2015 at 12:50 am #531691
    handelsmann

    So good guys – thank you so much.

    November 7, 2015 at 8:54 pm #531928
    Josue

    You are welcome, glad we could help :)

    Regards,
    Josue

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