Having issues with my website's navbar display on PC and mobile


Having issues with my website's navbar display on PC and mobile



I have limited coding skills, and built a portfolio website for myself utilizing WordPress, a pre-built theme called Ocean WP, and the Elementor plugin. The problem that I was facing earlier was that my nav menu had an arrow to indicate a drop down menu on one of my pages.



I really didn't like how this looked, so I reached out to Wordpress Support for help, and was given this CSS code to input:


/* eliminate dropdown arrow */
.elementor-navigation .menu-item-has-children > a:after {
display:none;
}



While the code has worked to remove the arrow, it's left my nav menu with an uneven space. Additionally, I'm not sure how to make this code work on tablet/ mobile devices because the arrow still shows up.





Please provide a Minimal, Complete, and Verifiable example. Please look at guide how do I ask a good question?
– Andrzej Ziółek
Jul 1 at 20:01





I apologize, thank you for sharing these resources with me. I am new to this site, and will make sure my future questions fits within the guidelines!
– inky_biscuits
Jul 2 at 1:34




1 Answer
1



You've hidden the arrow, but not the extra spacing for it.
Here's the css without spacing and arrow:


.elementor-navigation .eldropdown-toggle {
display: none;
}
.elementor-navigation .menu-item-has-children > a {
margin-right: 0;
}
@media screen and (min-width: 56.875em)
.elementor-navigation .menu-item-has-children > a {
padding-right: 1em;
}
}



I would recommend you to keep the dropdown arrows though.





Thank you so much! And any particular reason why I should keep the drop down arrows? I'm not disagreeing or anything, but do you think it looks or functions better this way? I just found it a bit awkward on mobile is all.
– inky_biscuits
Jul 2 at 1:15






@inky_biscuits So your visitors know that there are actually sub items to your navigation without hovering over each menu item. Also there is no hover on mobile so your users won't be able see those sub pages.
– Furkan Poyraz
Jul 2 at 7:03





That makes sense, thank you for the input. And yes, I noticed that on mobile after I put the code in. I will keep the drop down arrows then. Thank you again for you help.
– inky_biscuits
Jul 2 at 16:22






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

How to add background colour in existing image using Swift?

How to add background colour in existing image using Swift? I am trying to add background colour to existing image but it is not working. Here below is my code:- extension UIImage { func imageWithColor(tintColor: UIColor) -> UIImage { let rect = CGRect(x: 0, y: 0, width: 1, height: 1) UIGraphicsBeginImageContextWithOptions(rect.size, false, 0) tintColor.setFill() UIRectFill(rect) let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() //self.type(of: init)(ciImage: CIImage(image: image)!) return image } } extension UIImage { /** Returns an UIImage with a specified background color. - parameter color: The color of the background */ convenience init(withBackground color: UIColor) { let rect: CGRect = CGRect(x: 0, y: 0, width: 1, height: 1) UIGraphicsBeginImageContext(rect.size); let context:CGContext = UIGraphicsGetCurrentContext()!; context.setFillColor(color.cgColor); context.fill(rec...
Read more

Moria Casán

Image
Moria Casán Casán in 2016 Born Ana María Casanova ( 1946-08-16 ) August 16, 1946 (age 71) Buenos Aires, Argentina Residence Parque Leloir, Ituzaingó, Buenos Aires Province, Argentina [1] Occupation Actress, presenter, theatre producer, TV personality, talent manager Years active 1970–present Spouse(s) Mario Castiglione ( m.  1986; div.  1990) Children Sofía Gala Castiglione Signature Ana María Casanova (born August 16, 1946), known by her stage name Moria Casán , is an Argentine actress and TV personality. Casán made her theatre debut in 1970, and quickly became one of the country's leading vedettes during Argentina's Golden Age of revue. Her sex symbol status was further cemented during the late 1970s and 1980s, as she starred in various sexual comedy films alongside Alberto Olmedo, Jorge Porcel and Susana Giménez. Since the mid-1980s, Casán has also established herself as an important TV personality, hostin...
Read more

How to make file upload 'Required' in Contact Form 7?

How to make file upload 'Required' in Contact Form 7? I have a Contact Form 7 form on my Wordpress website and I have specified that the file upload is mandatory by putting a * , however the users are able to submit the form without file upload. * Relevant Contact Form 7 form is given below: <div class="filelink">[file* AddanImage filetypes:gif|png|jpg|jpeg]</div> How do I write the Contact Form 7 code or add a validation perhaps so that the users are not able to submit the form without uploading an image? Any hints/help/guidance is highly appreciated. Have you check doc - contactform7.com/file-uploading-and-attachment – Mukesh Panchal Jun 30 at 8:38 @MukeshPanchal I have and the code complies with the documentation – Hamza Ahmad Jul 1 at 10:44 ...
Read more