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:

https://i.sstatic.net/42msu.jpg

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

https://i.sstatic.net/UfSMK.jpg

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

Tips for updating text in a freshly opened window using JQuery or JavaScript

I have a function that is triggered by a button click to open a new window or tab, display an alert, and update text. Here is the code snippet: function nWin(p) { var setStyle = "<style rel='stylesheet'>\ .vTop {\ ...

javascriptjqueryhtmlcss

Triggering a JavaScript event with every update to the DOM marked as "completed"

I've been having some trouble with a specific task. I'm working on a script where I need to execute some functions after DOM manipulation is complete. The challenge is that I can't make changes to any other scripts on the page, as they might ...

javascriptjqueryhtmlajaxdom

What's the best way to align grid items that are positioned next to each other in CSS Grid?

I'm having trouble aligning two grid elements next to each other. What I want is for the heading, paragraph, and bottom links to be in one grid element and the image to be in another. When I tried using grid-template-columns: 1fr 2fr;, one element got ...

htmlcsscss-grid

Should the event happen inside a div section

How can I determine if an element is currently positioned within a specific div? I am working on a vertical scrolling menu where the height of the navigation div is set and overflow is hidden to show only a portion of the links at a time. To navigate thr ...

jquerycssscroll

Looking to create a div in HTML with two columns and two rows for display

Query: I am facing issues adjusting these grids using HTML and CSS. I have attempted to place them in a single frame within a separate div, but it's not working as expected. I need help aligning the grids according to the provided image below. Can som ...

htmlcssbootstrap-4

Positioning of a paper-dialog in Polymer

I'm currently utilizing polymer's paper-dialog element in my application. While the dialog is always centered by default, I am looking to establish a minimum distance between the dialog and the right side of the window. This way, as the window re ...

htmlcssdompolymer

Encountering a 404 Error in Wordpress When Using query_posts Along with Pagination

I am currently implementing a basic loop with query_posts on my category template, along with a custom pagination function. The initial page is functioning perfectly, but when I try to navigate to the next page (/page/2) using the next button, a 404 error ...

phpwordpresspagination

I am experiencing an issue with the interaction between my "label" tag and "summary" tag. The details are not opening when I click on the label. Can someone please provide guidance on how to resolve this

I have reviewed the question here, but it does not provide an answer, and there's also this related question. However, my question has a slightly different angle. I am encountering an issue where adding another element inside the summary tag prevents ...

htmlhtml-tag-detailshtml-tag-summary

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

htmlcss

Having Trouble with Jquery Toggle Function!

I have put together a small Jquery script after much contemplation (since I am new to this), and unfortunately, it is not working as expected! Here's the issue: in my code, I want to click on an element defined by the variable trigger, and when clicke ...

htmljquery-uitogglejquery

Does using the HTML doctype result in adding extra whitespace?

Could someone provide an explanation as to why setting a doctype of <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> and <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> results in different rendering of the following ...

htmlfirefoxrenderingxhtml-1.0-strict

Creating a Unique Carousel Design with Ant Design

https://i.sstatic.net/HobMm.jpg Steps to personalize the ant design carousel with these unique features: Use Bullets instead of Boxes Modify Bullet Color Place Bullets outside the image container Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr ...

javascripthtmlreactjscarouselantd

What is the best way to ensure that the content container's max-width for a split tier is the same as the width of a full-width tier?

My goal is to create a split tier on a webpage with a 60/40 layout. The size of this tier should be calculated based on the maximum width of the container above it. Using JavaScript and jQuery, I managed to derive the max-width value of the full-width-tier ...

javascriptjqueryhtmlcss

Convert HTML style text annotations into a collection of dictionaries

Currently facing the following issue: Suppose I have a string "<a>annotated <b>piece</b></a> of <c>text</c>" To create a list with the desired result as [{"annotated": ["a"]}, {"piece": ["a", "b"]}, {"of": []}, {"te ...

pythonhtmlparsinghtml-parsingnlp

My image is being cropped on larger screens due to the background-size: cover property

I am currently in the process of designing a website with a layout consisting of a Header, Content, and Footer all set at 100% width. To achieve a background image that fills the screen in the content section, I utilized CSS3 with background-size:cover pr ...

cssbackground-image

Disabling a chosen option within a dropdown menu

`Hello there, I am just starting out with JavaScript and jQuery. Currently, I am developing a web application for ordering food and drinks. I have a dropdown menu for selecting breakfast items and the quantity. When the "add" button is clicked, a dynamic ...

javascriptjqueryhtml

The top navbar does not stay fixed when the page is scrolled

Having some trouble with my navbar. Here is the code I'm using: <nav id="strumenti" class="navbar navbar-expand-sm navbar-light bg-light sticky"> <a class="navbar-brand" href="#"> <img src="C:\Users\Fabry\De ...

csshtmlbootstrap-4navbar

JavaScript/jQuery Tutorial: Accessing the src attribute of images sharing a common class名

How can I extract the src values of images with the same class and display them in an empty div? For instance: <body> <img class="class1" src="http://www.mysite.com/img/image1.jpg" width="168" height="168" alt=""> <img class="class ...

javascriptjqueryhtml

Switch to a different webpage based on radio button selections in a PHP script

On my webpage, I have two pictures that act as radio buttons, along with a "proceed" button. However, when I click on the button, it does not redirect to the desired page. Below is the code for my form and PHP processing page: <body> <fo ...

phphtmlhttp-redirectradio-button

What steps should I take to securely store my WordPress form submission data in a JSON file?

I recently set up a form on my AWS Wordpress site using NinjaForms and I'm looking for a way to save the data collected into a JSON file. The form functions correctly, but I need a plugin that can assist with this task. If anyone could point me in th ...

jsonwordpressformsamazon-web-services