Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 28, 2015 at 1:11 am #81740
    mailhunter
    Participant

    Hi,

    I’m using the Catch Box Theme with my personal child theme. I would update to the actual version. But I have a problem.

    I added a CSS class in the menu (no-mobile-menu-item)

    In the CSS I added:
    .no-mobile-menu-item {display:none;}

    In the normal desktop menu the links are not shown (correctly) if I add .no-mobile-menu-item {display:none;} for the desktop version. But in the responsive menu they are shown. I don’t know why. I should not be shown (display:none). I just tested this offline. So, I can’t send you link to show.

    Perhaps it is also possible to create a second menu, just for mobile view.

    I would be happy if you could give me hints to solve my problem.

    Best Regards,
    mailhunter

    December 28, 2015 at 10:37 am #81754
    Mahesh
    Participant

    Hi @mailhunter,

    I think you are trying to hide the item only in mobile view. If so, please use the following CSS:

    @media screen and (max-width:961px){
    .no-mobile-menu-item {
        display:none !important;
    }
}

    Let me know if this solves your issue.

    Regards,
    Mahesh

    December 28, 2015 at 1:55 pm #81757
    mailhunter
    Participant

    Hello,

    thank you for your answer. To show the result, I published it. See: http://christus-gemeinde.net/cms/.

    The problem I now have is, that the dark lines below the menu-item is bigger, if the following link is hidden.

    See the links “Bildergalerien”, “Veranstaltungen” and Texte.

    How can I fix this?

    Regards,
    mailhunter

    December 28, 2015 at 2:13 pm #81758
    mailhunter
    Participant

    Hello again:),

    I’ve also seen, that large images are not centered correctly.

    Before the Update, I had a white space left and right to the image. If I look at the smartphone now, I have white space left, but not on the right sight of the image. See for demonstration the tow image on the home page.

    Regards,
    mailhunter

    December 28, 2015 at 3:58 pm #81760
    Mahesh
    Participant

    Hi @mailhunter,

    For removing large dark lines add following Custom CSS:

    @media screen and (max-width: 960px) {
	.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-535 ul.sub-menu,
	.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-538 ul.sub-menu,
	.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-item-540 ul.sub-menu{
		border-top: none;
	}
}

    For the second issue, image not centered, it is a bit complicated, @Sakin will answer this.

    December 31, 2015 at 3:19 pm #81961
    Sakin
    Keymaster

    @mailhunter: To make that header image center, you can add the following css:

    .head-center {
    text-align: center;
}
    December 31, 2015 at 3:29 pm #81962
    mailhunter
    Participant

    @Saskin: My problem is not the header image.

    My problem is, that the images on the pages – within in the content – are not correctly presented. Before the Update, I had a white space left and right to the image. If I look at the smartphone now, I have white space left, but not on the right sight of the image. See for demonstration the two images on the home page,
    or – for not centered images – here: http://www.christus-gemeinde.net/cms/wir-uber-uns/

    December 31, 2015 at 3:46 pm #81965
    Sakin
    Keymaster

    @mailhunter: Ok then add the following css:

    /* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img,
img.wp-post-image,
img.attachment-thumbnail{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
}
    December 31, 2015 at 4:16 pm #81971
    mailhunter
    Participant

    Thank you. It works fine:).

    A last question: If I have a viewport a bit bigger than the image, e.g here: http://www.christus-gemeinde.net/cms/wir-uber-uns/

    the first text line below below the image flows right. This ends when I start with float:left/right in the desktop view. Is it possible to start with complete text lines under the images?

    January 1, 2016 at 1:14 am #81990
    Sakin
    Keymaster

    @mailhunter: Add the following css:

    @media screen and (max-width: 767px) {	
    .alignleft {
        float: left;
        margin-right: 2em;
    }
    .alignright {
        float: right;
        margin-left: 2em;
    }
}
    January 1, 2016 at 5:32 pm #82013
    mailhunter
    Participant

    @Saskin: Thank you for the help. I wish you a happy new year.

    January 1, 2016 at 7:02 pm #82014
    Sakin
    Keymaster

    @mailhunter: Wish you too Happy New Year… By the way, my name is Sakin and my user handle is @sakinshrestha 🙂

    January 1, 2016 at 11:53 pm #82034
    mailhunter
    Participant

    @sakinshrestha: Sorry about the wrong name, Sakin! Now, I checked it:-).

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Mobile menu – some entrys disabled’ is closed to new replies.