Issue with Menu

  • Author
    Posts
  • #137122

    scrozes
    Member

    Hello !

    I’m using the Bari theme on my blog http://www.myoxybubble.com/.
    I have two requests about the menu :
    1) On Internet Explorer, the menu button seems to be hide or write in white with a white background color.
    So you can click on it but it’s invisible if you don’t know where is it.
    There is no issue with Google Chrome or Safari.

    2) Is it possible to change the menu format to have an horysontal menu like on this blog : https://www.leblogdesarah.com/ ?
    I’m aware it’s not the same theme and this is not the philosophy of the theme, but I will really appreciate this.

    Thanks a lot for your help.

    The blog I need help with is myoxybubble.com.

    #137160

    lelandf
    Theme Author

    Hi there,

    1) Thanks so much for bringing this to my attention. There was a problem with the CSS in the theme, and I’m surprised that other browsers somehow displayed it as expected.

    I did deploy a fix but have not been able to confirm it’s working yet. I’ll circle back on this to make sure it works, or if you notice the problem has been resolved, feel free to let me know.

    2) Hmm, unfortunately this is just not how the theme right now, but it’s not impossible to do with Custom CSS.

    I don’t want to make any guarantees at this point because I haven’t tested this yet, but can you do me a favor and build the menu you are hoping to display horizontally in one of your footer widgets?

    More info on setting that up is here: https://en.support.wordpress.com/widgets/navigation-menu-widget/

    Once the HTML markup is on the page thanks to the footer widget, it may be possible to manipulate it with CSS to your liking.

    Regards,
    Leland

    #137291

    scrozes
    Member

    Hi,

    1) I have always the issue on IE. But I didn’t change anything and didn’t see any update about Bari theme.

    2) The menu I want to display is the primary menu, visible on the right side of my blog when you click on the menu button. Do you need I add it on a footer widget ?
    Just to precise my resquest if necessary : I would like an always visible menu, horyzontal and drop down, instead of the actual primary menu.

    Thanks a lot for your help.
    Sabrina

    #137298

    lelandf
    Theme Author

    Hi Sabrina,

    1) Hmm, it doesn’t appear the fix I applied for Bari is working on your site. Just out of curiosity, does it work here? https://baridemo.wordpress.com/

    2) I understand what you mean. Give me some time to work on this as it’s not a quick fix. While I do not want to make any guarantees at this point, I believe it should be possible with Custom CSS. I will update this thread later with what I figure out.

    For now, don’t worry about what I said about the footer widget.

    Best regards,
    Leland

    #137300

    scrozes
    Member

    Hi Leland,

    1) The issue don’t appear on IE with the given URL.

    2) I can understand that my request require a lot of work. It was not my intention to push you.

    Thanks again for your reply and your help.

    Best regards,
    Sabrina

    #137303

    lelandf
    Theme Author

    Hi Sabrina,

    1) Hmm, I just realized you may be using a self-hosted WordPress site with Jetpack. Is that correct? If so, there may be a different deployment process for theme updates.

    2) Can you try this code and let me know if it works for your needs?

    @media (min-width: 1000px) {
    	.slide-out .menu-item-has-children > a::after {
    		vertical-align: top;
    	    text-align: center;
    	    -moz-transition: color .1s ease-in 0;
    	    -webkit-transition: color .1s ease-in 0;
    	    display: inline-block;
    	    font-family: "Genericons";
    	    font-style: normal;
    	    font-weight: normal;
    	    font-variant: normal;
    	    text-decoration: inherit;
    	    text-transform: none;
    	    -moz-osx-font-smoothing: grayscale;
    	    -webkit-font-smoothing: antialiased;
    	    speak: none;
    	}
    
    	.slide-out .menu-item-has-children > a {
    		position: relative;
    		padding-right: 10px;
    	}
    
    	.slide-out .menu-item-has-children > a::after {
    		font-size: 12px;
    		position: absolute;
    		text-decoration: none;
    		top: 5px;
    		right: -6px;
    	}
    
    	.slide-out .menu-item-has-children > a::after {
    		content: "\f502";
    	}
    
    	.slide-out ul ul .menu-item-has-children > a::after {
    		content: "\f501";
    		top: 12px;
    		right: 2px;
    	}
    
    	.menu-toggle,
    	.close-toggle {
    		display: none;
    	}
    	
    	body .slide-out {
    		background: transparent;
    		visibility: visible;
    		right: auto;
    		left: 7.5%;
    		bottom: auto;
    		width: 60%;
    		font-size: 13px;
    		top: 30px;
    		z-index: 3;
    	}
    	
    	body .slide-out-inner {
    		padding: 0;
    	}
    
    	body .slide-out li {
    		float: left;
    		padding-right: 3em;
    		padding-bottom: 0;
    	}
    
    	body .slide-out ul ul {
    		border: none;
    		float: left;
    		position: absolute;
    		top: auto;
    		left: -999em;
    		z-index: 99999;
    		margin: 0;
    		padding: 10px 0 0;
    	}
    
    	body .slide-out ul ul li {
    		float: none;
    		border-bottom: 1px solid rgba(0,0,0,.1);
    		padding-right: 0;
    		position: relative;
    	}
    
    	body .slide-out ul ul ul {
    		border-left: 1px solid rgba(0,0,0,.1);
    		left: -999em;
    		top: 0;
    		padding: 0;
    	}
    
    	body .slide-out ul ul li:hover > ul,
    	body .slide-out ul ul li.focus > ul {
    		left: 100%;
    	}
    
    	body .slide-out ul ul a {
    		background: #fff;
    		display: block;
    		padding: 10px;
    		width: 200px;
    	}
    
    	body .slide-out ul li:hover > ul,
    	body .slide-out ul li.focus > ul {
    		left: auto;
    	}
    }
    #137307

    scrozes
    Member

    1) Yes that’s correct. Sorry again to not have mentioned it.
    2) your code works well and it’s exactly what I expected !

    So, many thanks for your help !
    Now I have to play with your code to custom the display of the menu (background colour, hover color etc)

    Thank you very much !

    Sabrina

    #137310

    lelandf
    Theme Author

    1) Hmm, the theme update process with Jetpack must differ from WordPress.com. In the meantime, can you please try this Custom CSS?

    body .menu-toggle,
    body .search-submit {
    	color: #1e0d03;
    }

    It should fix the issue.

    2) So glad to hear that!

    Regards,
    Leland

    #137311

    scrozes
    Member

    1) I insert your code. I didn’t try on IE between the menu code and the last fix code.
    But seems to work.

    Thank you !

    Regards,
    Sabrina

    #137312

    lelandf
    Theme Author

    Hi Sabrina,

    Yes, that “horizontal menu” code didn’t contain any IE fix like the code in my last post, so I think that did it.

    You’re very welcome! If you have any other questions, feel free to let me know.

    Regards,
    Leland

    #137314

    scrozes
    Member

    Thank you so much.

    Effectively I have another question ;-)
    But perhaps you prefer I open another topic in the forum ?
    If it’s the case, please let me know.

    Here Is my question :
    Is it possible to add on the pages, on the right, the list of the lasted post, like on the articles ?

    Thank you !

    Sabrina

    #137319

    lelandf
    Theme Author

    Since your question involves another topic it would be best if there was a separate thread for it.

    It’s possible but like with the horizontal menu, not a simple fix. Since the “latest posts” code is already done, however, it’s just a matter of rearranging some template files.

    To lead you in the right direction, you would need to copy the bari/single.php code into bari-child/page.php in your child theme.

The topic ‘Issue with Menu’ is closed to new replies.