Inserting images in primary navigation menu in SELA
-
Hi!
So I’ve been trying to add five images that are part of our logo to the primary navigation bar, interspersed with the website pages links. I have uploaded the images and tried my hand with the coding but I just can’t get my head around it/figure it out. I’m posting the mess of the code here, maybe someone can make sense of it. Thanks!!
<style type="text/css" id="custom-colors-css">.nav-menu>li>a:after{color:rgba(0,0,0,.3)}.main-navigation a,.social-links ul a:before{color:#ccac00}.menu-toggle,.menu-toggle:hover,.menu-toggle:focus{color:#ccac00}.main-navigation.toggled ul ul,.main-navigation.toggled ul ul a{color:#50555b}.site-info a{color:#50555b} main-navigation li.menu-item-bearclaw {background: url(http://wp.me/a7GS9Z-1A);} main-navigation li.current_page_ancestor>a,.main-navigation li.current-menu-ancestor>a{color:#50555b}.main-navigation a:hover,.main-navigation ul>:hover>a,.main-navigation ul>.focus>a{color:#e6c61a}.main-navigation li.current_page_item>a,.main-navigation li.current-menu-item>a{color:#ffff7f}.main-navigation li.current_page_item>a .sub-menu li a,.main-navigation li.current-menu-item>a .sub-menu li a,.main-navigation ul ul li.current_page_item>a,.main-navigation ul ul li.current-menu-item>a{color:#ffff7f}body{background-color:#50555b}.main-navigation,button{background-color:#50555b}.main-navigation .nav-menu>li>a:after,.main-navigation .menu>li>a:after{color:#50555b}a,.entry-title a:hover,.comment-meta a,.jetpack-testimonial .entry-title{color:#ccac00}.widget_flickr #flickr_badge_uber_wrapper td a:last-child,.widget-area .milestone-countdown .difference{color:#50555b}.main-navigation ul ul a:hover,.main-navigation ul ul>li.focus>a{color:#ccac00}input[type="button"],input[type="reset"],input[type="submit"],#infinite-handle span{background-color:#7f6c00}input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="search"]:focus,input[type="url"]:focus,textarea:focus{border-color:#7f6c00}.social-links ul a:before,.footer-widget-area button{background-color:#50555b}.site-info a:hover{color:#ffff7f}.footer-widget-area a:hover{color:#ccac00}</style> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="menu" aria-expanded="false">Menu</button> <div class="menu-primary-container"><ul id="menu-primary" class="menu"> <li id=“menu-item-bearclaw” class=“menu-item menu-item-type-custom><a href=“http://wp.me/a7GS9Z-1A”></a></li> <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-12"><a href="https://twelvetriangles.com/">Home</a></li> <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-13"><a href="https://twelvetriangles.com/about/">About</a> <ul class="sub-menu"> <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="https://twelvetriangles.com/about/">The Kitchen</a></li> <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="https://twelvetriangles.com/about/">The Shops</a></li> <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="https://twelvetriangles.com/about/">The Magic of Sourdough</a></li> </ul> </li> <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="https://twelvetriangles.com/blog/">Blog</a></li> <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="https://twelvetriangles.com/contact/">Contact</a></li> </ul></div> </nav>The blog I need help with is: (visible only to logged in users)
-
Hi there, you can add background images to your menu items and hide the text with CSS, if that is what you are trying to do. You cannot edit the theme php script files though.
Can you explain a bit more what you are wanting to do and I would be happy to help with that.
-
Hi!
So what I’m trying to do is to intersperse the different objects/icons from the logo in the header (there’s five of them) between the links in the primary menu bar (e.g. where it says HOME, ABOUT, BLOG, etc.). I don’t want the objects to be links, just ‘decoration’.
When looking at the code I noticed that the menu bar is essentially a list, so I figured I could just insert the objects into the list, but a) I’m unsure whether this is actually workable, and b) if it is, I’m not sure how to go about it code-wise. Would I just use an HTML code to insert an image?
Hope this makes sense at all.
Thank you! -
We can’t edit the theme files, so you cannot add the images to the HTML for the menu.
We can easily add the four to the menu with the following CSS. This is wrapped in a Media Query which displays the image as long as the menu is the full menu. When it switches to the touch device menu below 768px in window/screen width, it reverts to the original design since things go awry if we leave the image in on the touch device menu. It may be that we can add some additional CSS for the touch device menu, but let’s start with this and see what you think. Add the following to the bottom of your custom CSS.
@media screen and (min-width: 768px) { .menu-item-12 { background-image: url("https://twelvetriangles.files.wordpress.com/2016/07/bearclaw.png"); background-size: contain; background-repeat: no-repeat; background-position: left center; padding-left: 50px !important; padding-right: 0 !important; } .menu-item-13 { background-image: url("https://twelvetriangles.files.wordpress.com/2016/07/doughnut.png"); background-size: contain; background-repeat: no-repeat; background-position: left center; padding-left: 60px !important; padding-right: 0 !important; } .menu-item-15 { background-image: url("https://twelvetriangles.files.wordpress.com/2016/07/croissant.png"); background-size: contain; background-repeat: no-repeat; background-position: left center; padding-left: 70px !important; padding-right: 0 !important; } .menu-item-14 { background-image: url("https://twelvetriangles.files.wordpress.com/2016/07/knot.png"); background-size: contain; background-repeat: no-repeat; background-position: left center; padding-left: 50px !important; padding-right: 0 !important; } }
- The topic ‘Inserting images in primary navigation menu in SELA’ is closed to new replies.
WordPress.com Forums 