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

The MaterialUI Datagrid is throwing an error message for an Invalid Hook Call

Having a strange issue with my simple component. I've imported DataGrid from MaterialUI, defined variables for columns and rows, and rendered the DataGrid in a functional component. However, I'm getting an "invalid hook call" error. Most solution ...

javascriptreactjsdatagridmaterial-ui

The nodejs https website is unable to render in Internet Explorer 11

Our secure website is not loading in IE11 (dnserror.html - page cannot be displayed). However, it works perfectly fine on all other browsers! The webserver we are using is a node.js app with default cipher settings. The SSL certificate is valid and enhan ...

htmlnode.jssslhttpsinternet-explorer-11

Multi-line auto-suggest list with typeahead functionality

Currently, I am utilizing typeahead with Twitter Bootstrap and AngularJS. The autocomplete suggestions are displayed in a single line, as seen in the screenshot below. However, I would like to have the big cities' names displayed on separate lines. Fo ...

cssangularjstwitter-bootstrap

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

csstwitter-bootstrap

What is the process for extracting JSON values by specifying keys within a nested JSON structure?

I am attempting to extract specific JSON values for particular keys from a JSON structure. I have made the following attempt: var jsonstring; jsonstring = JSON.stringify(myjsonObjectArray); alert(jsonstring);//displaying the JSON structure below jsonstri ...

javascriptjqueryangularjsjsoncoffeescript

Emphasize multiple anchor points

I am looking to highlight two sections of a page simultaneously. Here is what I currently have: <li class="langLI" style="list-style-type:none"><a href="/non-discrimination-and-language-assistance##French">| French Creole</a></li> ...

htmlcss

Divide Array of Strings in a DataFrame into separate columns

I currently have a dataframe that looks like this: df.show() +-----+ |col1 | +-----+ |[a,b]| |[c,d]| +-----+ Is there a way to transform it into the following dataframe? +----+----+ |col1|col2| +----+----+ | a| b| | c| d| +----+--- ...

jsondataframeapache-sparkpysparkexplode

How to properly handle sending an empty post request in Angular 2

My current issue revolves around attempting to send data from my application to the server using a POST request, however, the server seems to be receiving empty POST data. This is the function responsible for sending the data: private headers = new Heade ...

javascriptphpjsonangular

Utilize global variables in ng-apimock mocks without the need for double quotes

We integrated ng-apimock into our Angular project and successfully created mock definitions and wrote tests using protractor. Now we are looking to implement global variables in our mock definitions. Here is an example of a mock definition: { "expressi ...

jsonangular

Animate out Material UI element with zoom effect and then remove it from the

I'm currently working on a dynamic user interface that allows for adding and removing items dynamically. Each item has both an add and remove button, with a special animation effect using Zoom. While this works smoothly when adding new items, I encoun ...

javascriptreactjsmaterial-ui

When the button is clicked, verify the existence of the file, then display a message and undo

I encountered a situation where I needed to verify if a user tries to input data with the same date and same region again, they should receive a prompt alert. I attempted to achieve this using code in the backend, as shown below:- protected void btnSave ...

javascriptjqueryasp.net

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

cssflexbox

Is there a way to position two Grid elements to the left and one to the right in Material UI, especially if the first Grid element has a specified width

I'm currently using Material UI and have a Grid layout with three items. The left item needs to have a fixed width of 240px and be aligned to the left. The middle item should be left justified and can have any width, containing buttons that I've ...

javascriptreactjsflexboxmaterial-ui

Unleash the Power of Animating Your Active Tabs

Is there a way to create animated tabs that slide in when clicked? I've experimented with using transition code but haven't quite achieved the desired effect yet. This is what I currently have: [data-tab-info] { display: non ...

javascripthtmlcss

Unable to resolve the issue with ExpressPeerServer not being recognized as a function in server.js

I'm facing an issue with the peer.js library in my npm project. I have successfully installed it, but when I try to use it in my server.js file, I get an error saying that peerServer is not a function. const express = require('express'); con ...

javascriptnode.jsexpresswebrtcbackend

Transform an array of strings with specific formatting into an array of arrays

Looking to convert an array generated from a Postgres query into an array variable in Laravel? I received the following var_dump result in Laravel: 0 => array:1 [ "order_itemset" => "{8,11}" ] 1 => array:1 [ "or ...

phpjsonlaravelpostgresqltext-parsing

Stop options from being hidden in a select dropdown using HTML

Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...

javascriptjqueryhtmlselect

Does Jackson serialize fields in uppercase letters?

When serializing my object, it appears as {name="nyname" ....}, but I need all keys to start with uppercase. For example, {Name="myname",.....}. Is there a way to achieve this using Jackson? ...

jsonjackson

Embedding a countdown timer in basic HTML code

Attempting to embed the following into an HTML website: The issue I am facing is that when I run it, the timer does not appear. However, when I run it in fsFiddle, I do see the countdown timer. What could be causing this problem? <!DOCTYPE html> & ...

javascripthtmlcounter

What is the best way to extract the created_time field from this Instagram JSON object?

After receiving this JSON data, I noticed that the created_time value displays the time in integer format instead of a proper time format. How can I convert the created_time into the correct format? "filter"=>"Normal", "created_time"=>"1421677966" ...

ruby-on-railsrubyjsonruby-on-rails-4instagram