Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me.

For mobile screens, the template I purchased includes a slicknav menu. I am looking to customize it so that the website title appears in the middle of the slicknav menu bar. I know there is a 'brand' function for slicknav, which seems to be used for displaying icons such as the search icon and social icons.

I am not very knowledgeable about websites :p

Could someone provide guidance on how to add the title (with the correct font) to the slicknav bar on mobile, or how to include a centered 'text box' over the menu? Where should I include the code for this?

I have made changes to the main menu in the "Additional CSS" section of WordPress customizer, but I am open to suggestions on where else to place it.

You can find my website at interiors.stephhannam.com

Thank you in advance, Steph

javascripthtmlcssjsonslicknav

Answer №1

If you want to add some custom text or images before or after a menu item, you can use the :before or :after pseudo-elements in CSS. Simply set the content property to whatever you want to display. For example, you could use content: "insert your text here". You can also adjust the placement and style of the added content by using properties like position:, padding:, text-align:, and font-size:.

.slicknav_menu:before {
    content: "STEPH HANNAM INTERIORS";
    font-size: 3vw;
    position: absolute;
    padding: 4vw;
    text-align: center;
    width: 100vw;
}

Answer №2

When it comes to CSS, things are a bit different. However, I believe that in HTML we typically begin with something along the lines of

<html>
  <body>
  <h1>your website name<h1>
  <style>
  measurements:- ...
  </style>

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

Transmit the bound data (using ng-model) to a custom AngularJS directive

/*I am looking to define the maxDate as vmEndDate*/ app.directive('myDatepicker', function ($parse) { return function (scope, element, attrs, controller) { var ngModel = $parse(attrs.ngModel); alert(element.va ...

javascriptangularjs

What is causing some Font Awesome icons to not function properly with boostrapCDN?

I thought all Font Awesome icons would work by linking this bootstrap stylesheet, but I've only managed to get one of them (`.fa fa-deskto`) to display. The rest, like the second one for example (link below), simply don't show up: Both icons are ...

htmlcssreactjstwitter-bootstrapfont-awesome

Logging in Python: A Guide to JSON Formatting

Our Python Django application requires logging using the code snippet below in order to allow ELK to index the log record as JSON logger.info(json.dumps({'level':'INFO','data':'some random data'}) We currently have ...

pythonjsonpython-logging

Python JSON object iterated through using a for loop

Hi, I could use some help with parsing my JSON object. I'm trying to extract a specific JSON key and display its value. JSON Content { "files": { "resources": [ { "name": "filename", "hash": "0x001" }, { ...

pythonjson

Is there a way to adjust my input value to correspond to December of 2022?

I am working on a project where I need to set a default month and year that the user cannot modify. They should only be able to change the date in December months. Any tips on how I can achieve this? <input id="input_date" type="date&qu ...

htmlcss

Dynamic content modal

Recently, I started exploring react native. In my application, there are 5 buttons on the screen. Each of them triggers the same <Modal>, but the content inside it changes based on the button clicked. For example, if I click the first button, a tex ...

javascriptreactjsreact-native

Setting Json.Net as the primary serialization tool for a WCF REST service involves a few key steps

Is there a way to modify the default behavior of the WCF DataContractSerializer when serializing and deserializing entities in order to use JSON.NET instead? In my service contract, I am working with the City entity which has IsReference=true for design p ...

wcfjsonrest.net-4.0json.net

Ensuring the clickable area of the button aligns perfectly with the button itself and adjusting the arrow position to be

Check out the sandbox here: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css If you are looking for the classes .line and .arrow, they are what you need. When you create an event, notice how the arrows appear too low, with the clickable a ...

css

To grab a specific CSS attribute from a stylesheet using JavaScript

I am looking for a way to extract the value from a CSS file using a JavaScript function. Take a look at my code snippet below: HTML file -> <link rel="stylesheet" type="text/css" href="test_css.css" /> <script type="text/javascript ...

javascripthtmlcss

Import css background-images from a separate local directory that is located outside the root directory of the Next JS

I am facing a challenge with hosting a next.js app within the file structure of a parent website. I need the CSS in the app to use images that are located outside the app's file structure but within the parent website's file structure. Here is a ...

javascriptcssreactjsnext.js

Tips for creating a PHP cURL request using the provided documentation

Can anyone help with creating a PHP cURL based on the following documentation? Here is the raw curl text: curl --location --request POST '/serviceRates' \ --header 'Content-Type: application/json' \ --header 'acce ...

phpjsoncurl

Change the <base> element programmatically during server-side rendering

Searching for a way to obtain the base URL for an HTML page, so that relative URL requests from the browser utilize that base. If you are looking for answers, check out this link: Defining root of HTML in a folder within the site root folder When serving ...

javascripthtmlnode.jsexpress

The video header on my webpage refuses to start playing upon loading

I have a video displayed in the header of my website, but it only starts playing once the user clicks on the home link in the menu to navigate to /index.html. It does not play automatically when the page first loads. I have also tried manually entering /in ...

htmlcssvideohtml5-video

JSON Auto-Refresh Feature

My application retrieves JSON data from a server that I do not have control over, and uses it to populate a UITableView. I am looking for a way to automatically update my UITableView with the most up-to-date information from the server in real time. Whene ...

iosobjective-cjsonswiftuitableview

Setting up a Webpack configuration to compile modules within the node_modules directory

My webpack and babel configuration is causing some issues. I installed my component repository (es6 module without webpack configuration) as a node_module, but it's not working - I'm getting an 'Unexpected token import' error because Ba ...

javascriptnode.jswebpackbabeljs

Shift the position of an HTML element with a border to account for a stationary header

My inquiry is closely tied to a previously resolved issue discussed on this page. Specifically, the solution offered by @harpo in the top-rated answer's comments partially addressed my concern. Nonetheless, I've discovered that it doesn't ef ...

htmlcsstwitter-bootstrapanchoroffset

The ion-input border seems to be fluctuating as the keyboard appears on the screen

I'm currently working with Ionic 3 and experiencing an issue where the selected ion-input's border in the ion-content is shifting when the device keyboard appears on the screen. Here is a visual representation of the problem: https://i.stack.imgu ...

javascriptcssionic-frameworksassionic3

Performing multiple requests using Axios library in a React application

My goal is to make 2 requests and define variables using this.setState({}) for future modifications. This is the code snippet I have: class App extends React.Component { constructor() { super(); this.state = {user: false, repository :false} ...

javascriptreactjs

Learn how to collapse a list by clicking outside of it on the document with the following code: $(document).on("click"

I want to create a collapsible/expandable menu for my website. I had a version where hovering over a category would expand the subcategory, but what I really need is for the subcategories to expand when I click on a category and remain expanded until I cli ...

javascripthtmlcss

Angular popup window can't access DOM elements

Hey there, currently experimenting with an angular modal instance and running into a bit of a hurdle. When attempting to declare a querySelector in the modal controller, I'm encountering a console error stating 'Cannot read property 'queryS ...

javascriptjqueryangularjs