Customizing the image border at the top of the navigation bar

I'm in need of assistance with my navigation bar design. I have a specific vision for it, and I even have an image of the "rough texture" that I want to incorporate into the navigation menu. However, I've been struggling to figure out how to use CSS to achieve this desired look.

Below is the HTML code I am working with, utilizing Wordpress for the menu:

<div id="nav">
    <div class="container">
        <div class="row">
            <div class="span12"><?php mt_menu(); ?></div>
        </div>
    </div>
</div>

I attempted to add the texture using the following CSS snippet:

#nav::before{
    content:url('rough-texture.png');
}

However, I didn't achieve the desired result. Here's the image I'm trying to integrate into my navigation menu:

https://drive.google.com/file/d/0Bz4W2EsvOZtUQmFSdXhtTE52Z00/view?usp=sharing

Answer №1

If you want to add some style to your navigation bar, consider using two background images like this:

#nav {
  height: 50px;
  background-image: url(rough-texture.png), url(rough-texture02.png);
  background-repeat: no-repeat;
  background-position: 50% 0, 50% 100%;
}

The second image adds a nice touch to the bottom edge. Learn more about using multiple backgrounds in CSS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click on the input field to automatically choose files or folders

I am currently working on a project where I am using a combination of javascript and html to dynamically load a file in the browser. Here is what my code looks like: <input type="file" id="file-input" @input="openFile" /&g ...

Bootswatch's Bootstrap 4 dropdown and margin error issue

Recently, I decided to experiment with the new version of Bootswatch that is based on Bootstrap 4. However, I encountered a couple of issues - the "Cards" seem to have no margin and the dropdown in the menu doesn't function as expected. Can anyone she ...

Chai can't verify the HTML component

During my testing of an Angular project, I initially used Jasmine to check if a specific attribute of an HTML element exists. The following code snippet worked successfully for me: expect(element(by.css("*[id='ref_button']")).getAttribute(&ap ...

What could be causing the Php Media Gallery to malfunction?

I am currently working on setting up a video/image gallery to simplify the process of uploading videos/images. This gallery will include thumbnail images of the videos/images along with a brief description. When the thumbnail is clicked, the image/video wi ...

My navbar has an empty space that I want to fill. I aim to move the search bar all the way to the right - any suggestions on

https://i.sstatic.net/SvTiG.jpg This is the code for my navbar customization: <nav class="navbar navbar-dark navbar-expand-sm fixed-top navbar-custom" id="header-nav"> <div class="container"> <div class=" ...

Which tag is best to use for applying a CSS style to a section of text?

When it comes to styling text, I usually opt for one of the following methods: <span class="header">...</span> <div class="header">...</div> <p class="header">...</p> <label class="header">...</label> Howeve ...

Is there a way to regularly extract the most up-to-date HTML code from a dynamic website for designers to work

Our team of designers is responsible for creating graphical mockups, initial html, css, and image sprites for new designs. They also maintain these files. Once the hand-off is complete, our developers then take everything and work it into .Net code, templa ...

What is the best way to eliminate the background color from one span after selecting a different one?

I created a span element that changes its background color when clicked, but I want the background color to switch to the newly clicked span while removing it from the previously clicked one. Can someone help me achieve this? CSS list-sty ...

What is the reason for the attribute align="center" functioning in my HTML document?

Recently, I decided to delve into the world of HTML and created a simple basic file: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> My Webpage </title </head> ...

Using JavaScript, conceal a specific Div by examining the content within another Div

I am attempting to implement some logic using JavaScript. The goal is to hide the "cart-button" div if the innerHTML value of a div with the class "b-format" is set to Audio, otherwise hide the "more-button" div. However, for some reason this functionality ...

What is the best way to divide a pair of words onto two lines individually?

Looking for a way to break the word 'Mon 24' into separate lines like this: Mon 24 I attempted using word-break: break-all without success. Check out my code example here: https://codepen.io/bbk_khadka/pen/zbVLEp ...

Tips for adding jQuery UI styling to elements generated dynamically

I have a challenge with generating text fields using jquery while applying jquery ui styling to the form. The issue is that the dynamically created elements do not inherit the css styles from jquery ui: let index = 0; $('#btn_generate').on(& ...

Set default selected value for dropdown list using radio buttons

Could anyone provide guidance on how to reset a dropdown list value using a radio button selection? Specifically, I need the dropdown list to reset to its default "selected" option when a particular radio button is clicked. Any recommended approaches usin ...

I'm getting an error in the HTML from the Jive response - what's my next step?

Up to this point, I have successfully managed to parse JSON from a JIVE JSON response in order to deploy it on apps script. However, I am now encountering a malformed HTML error and am unsure of how to proceed. I have reached out to the Jive Community for ...

Client request: receive a daily update detailing the differences between two databases

Today, a customer requested that I provide daily reports on the changes between two tables in our database. I am currently contemplating the most efficient and intelligent way to fulfill this request. Should I create a SQL procedure? Or perhaps an HTML p ...

What's the deal with $routeProvider in angularJS?

I'm having some trouble with my simple web app that I'm trying to update using route provider. Everything works fine when I click on the list items on the page, but when I refresh the page, I get a 404 error. It seems like it's trying to acc ...

Flex mode allows for responsive row details in ngx-datatable

Having an issue with my ngx datatable row details. Everything works well initially, but when I adjust the browser width, the details don't scale properly with rows and columns. They seem to have a fixed width that was set when the page was first loade ...

Using Javascript, you can create a function that can disable or enable a text link based on

Here is the code snippet showcasing CSS styles and HTML elements: CSS: .enableLink{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#069; padding-right:20px; text-decoration:underline; cursor:pointer; } .disableLink{ display:none; fon ...

Display exclusively the provided value

Can someone please help me with printing in PDF style and displaying only the inputted value without showing the textbox or dropdown? Check out this image for reference I would like to achieve something similar, how can I do that? Any assistance would be ...

Why does Laravel DatePicker consistently default to showing the previous month instead of the selected month?

I've hit a roadblock trying to pinpoint the source of this error in the Tailwind UI Datepicker. Whenever I choose 09-08-2021 on the visual Datepicker, the value ends up saving as 09-07-2021. I've researched similar cases where the month value re ...