Challenges encountered while making CSS adjustments on the Wordpress Twentyfourteen theme

I'm currently assisting a friend with making some final adjustments to their website. The site is built on Wordpress using the Twentyfourteen theme and can be found at centromariposa.no.

Most of the modifications have been completed, but I'm facing challenges with the last one.

At present, the top section looks like this - where the links are getting hidden by the logo on smaller screens: imgur.com/oOnZspQ

When I try adjusting the paddings and margins for ".primary-navigation .nav-menu" in the Inspect console, it temporarily appears like this:

Unfortunately, when I make these changes permanent, it results in something like this (or even worse, depending on the situation):

Any suggestions on how I can achieve the layout shown in the second picture?

htmlcsswordpressheader

Answer №1

After reviewing the website, here are my thoughts:

  • The logo's background image is positioned ON the header instead of IN the header, which may be why you are unable to control it. Try moving it to the h1.siteclass element within your header
  • The lighter blue color appears more on the left side due to a custom sidebar setup where content and sidebar are aligned horizontally. Consider utilizing Bootstrap or theme options for proper alignment. If this layout is intentional, there might not be a need to change it.
  • To adjust the menu style, modify the site-header height as desired and then apply a margin-top to the search-toggle and site-navigation elements.

I hope these suggestions are helpful!

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

How can the default text color be adjusted in NSAttributedString when initialized with HTML dark mode?

During the process of converting my existing app to dark mode, I came across an instance where I needed to initialize a UITextView with an NSAttributedString for displaying some legal text from the app store. While everything looked good in light mode, swi ...

htmliosswiftnsattributedstring

Populate a dropdown list with array elements using Javascript in ReactJS

I am encountering an issue while trying to populate a dropdown with data from the 'options' array. The error message states that it cannot read property appendChild of null. Using 'document.getElementByClassName' instead of document.ge ...

javascripthtmlreactjs

Tips on extracting the value from an HTML input control

Looking for some assistance with a table generated by a 3rd party control. The table consists of only one row and one column containing HTML text like this: <p> this is a test</p> <p> <input name="amount" type="text" value="th ...

c#.netasp.nethtml

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

javascripthtmlcss

How can I switch between columns in a dual-column layout?

In my latest project, I utilized CSS Flexbox to create a sophisticated two-column layout that allows toggling each column independently. While this functionality is exactly what I need, I can't help but feel that my current method is somewhat cumberso ...

jqueryhtmlcssflexbox

Issue with resizing keyboard/dropdown popup in Android hybrid app when navigating offscreen

Here is the offscreen navigation menu I have set up. When I open a keyboard or dropdown, the offscreen menu changes and exhibits a small gap on the left side after the popup (highlighted in red). It seems like the menu is shifting further away from the ed ...

androidcsscordova

Would you like to store modified CSS properties in a cookie?

Currently, I am facing a challenge while working on an ASPX page where CSS is used to define DIV properties. Although these properties can be altered on the page, they do not reflect when attempting to print them. Is there a method to modify CSS properties ...

cssasp.net

Upon including the enctype attribute as "multipart/form-data" in my form and submitting it, the form redirects to a different page

My website has two main pages: The first page is admin.php <?php session_start(); if (!isset($_GET['page'])){ $_GET['page'] = 'home'; }//end if include_once(dirname(__FILE__)."/function.php"); ?> <?ph ...

phphtmlmysql

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

htmlcssangularjs

Securely upload files using PHP

I am looking to create an upload center where users can upload any type of file, including .php and .bat files. However, I want to prevent these files from being executed when accessed by others. For example, if a user uploads 'index.php' to &apo ...

phpfilesecurityuploadheader

JavaScript has encountered a syntax error

When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "tr ...

javascriptcssanimationzoomingpan

use jquery to dynamically switch CSS class on navigation with animated arrows

Looking to update arrows to display a right arrow when the parent list item has the .active class. Here is the jQuery code: jQuery(function(){ initAccordion(); }); function initAccordion() { jQuery('.accordion').slideAccordion({ opener ...

javascriptjqueryhtmlcssnavigation

How can I use cookies to make an HTML div disappear when a button is clicked?

I've been attempting to conceal this message in Vue.js, but so far I haven't had any luck. Currently, I am utilizing the js-cookie library. My objective is as follows: HTML <div v-show="closeBox()"> < ...

htmlvue.jscookies

Limit the number input to only allow values between 0 and 100

I am utilizing the Number input component from MUI, which includes Increment and Decrement buttons for adjusting numbers. Is there a method to limit the input to only accept values ranging from 0 to 100 ? Additionally, how can I decrease the width of the ...

javascriptcssreactjsmaterial-ui

Style your index with a Wordpress plugin

I've been attempting to modify a plugin's stylesheet, but I'm having trouble locating the CSS file that contains the necessary styles. Despite Chrome's developer tool indicating that it is styled directly on the index site, I have searc ...

phpcsswordpresspluginsstyles

How to download and install Google Chrome Canary on your Android or iPhone device

I've been diving into a HTML 5 Web Audio Input project lately. I'm keen to test it out on my Android/iPhone devices, but after some research, I discovered that it only functions properly in Google Chrome Canary. The problem is, I can't seem ...

htmlgoogle-chrome

What could be causing the if statement to evaluate as false even though the div's style.display is set to 'block'?

Building a react application using createreactapp and encountering an issue with an if statement that checks the CSS display property of a div identified as step1: const step1 = document.getElementById("step-1") if (step1.style.display === 'blo ...

javascripthtmlcssreactjs

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

Unable to place within div

Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...

javascriptjqueryhtml

Unable to properly load the Kendo Tree View based on the selected option from the combo box in the Kendo UI framework

I am encountering an issue where the Kendo treeview is not populating with different values based on a selection from the Kendo combo box. I have created a JSFiddle to showcase this problem. http://jsfiddle.net/UniqueID123/sample In the scenario provided ...

javascriptjqueryhtmlkendo-uikendo-treeview