How can I alter the width on the Menu drop downs?
-
I’m new to CSS and I’ve looked in the forums and online but can’t find out how to alter the width of the background in the drop down menu. It currently looks like this using the Twenty Twelve theme on wordpress.com
I’m looking to make the items have:
– same width, based on the widest element (text)
– adjustable padding
– centered beneath the menu itemAny advice much appreciated!
The blog I need help with is: (visible only to logged in users)
-
It’s not that blog I need help with incidentally, I hadn’t realised that footer was auto-added.
-
-
Hi there, to have submenus adjust in width based on the longest label, would require some sort of scripting, such as PHP or javascript, and those cannot be used here at WordPress.com.
On adjustable padding, I’m not sure exactly what you are wanting. We can certainly adjust padding overall on the submenu items.
We can target individual submenus, such as the one for Calendar and Admin by using the unique parent menu item ID. Add the following (for the Calendar submenu) and see what you think. I’ve used a media query and limited this change to 600px in width and over so that it doesn’t interfere with the styling of the minified menu for smaller devices such as tablets and phones.
@media screen and (min-width: 600px) { .menu-item-28 .sub-menu li a { max-width: 70px; } .menu-item-28 .sub-menu li { margin-right: 0; } .menu-item-28 ul.sub-menu { padding-left: 0; left: -10px; text-align: center; } }The one thing to keep in mind is that if you add things to the menu that are longer than the width set, the max-width would have to be adjusted in the CSS to fit the new longest text label.
-
Thanks thesacredpath, that definitely gives me the customization I was looking for, although I was hoping for an automatic way of keeping the widths in sync for later edits. I’ve implemented it for the Results, Calendar and Admin sub-menus which were like double as big as they needed to be. So thanks for that!
What I really want to programmatically in plain text is:
Let each sub menu have a common width for all its background elements, the maximum based on the longest sub menu item text automatically, so that each sub menu background as a whole is still rendered as a neat, rectangular block. Ideally I also want to be able to configure (within the twenty twelve customization UI) how much padding there is around the longest sub-menu item text.
-
You can adjust the padding globally and get the longest item to look as you want it, but without scripting, there isn’t really anyway have a length set based on the longest string, and there are things to overcome with that approach as well since browser preferences also come into play. One person may have a minimum font size of 16px set while the next person has a setting of 12.
-
Hi I wonder if you can help me – I need some code for individual pages. but to link to my home page, The framework is the same and I have 23 pages that work but I can’t change anything in the pages without changing either the home page or the header page affecting all the pages
1. The framework on the homepage fits perfectly whilst the other pages scroll down far too long which I think is the content sheet and the footer is way too wide -for the footer I can’t recognise what code to adjust to make it smaller – would it work If I copy the homepage code create pages in filemanager- copy the code find the page id and add it at the bottom of each page – any help would be appreciated.
thanks -
-
Hi @biankabooth, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org Themes and Templates forum.
For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.
-
Hi thanks for the reply – I am in fact hosted with godaddy and uploaded from there which I presumed meant I was with wordpress.com?
is this correct? -
a few days ago I was told I was not with wordpress.org and to come to wordpress.com – any one able to help me find out which one I am with? just to get answers to some questions and not to be thrown back and forth would be very much appreciated. two out of 3 domains wp was directly installed via godaddy. firstclassbrokerage.net and firstclassskippers.net
-
The sites hosted on godaddy are self-hosted, but sorry for the runarounds. Self-hosted sites, such as yours on godaddy are what are generally referred to as WordPress.org sites and are supported at http://wordpress.org/support/. There are differences between what can be done on self-hosted sites and what can be done here with sites hosted on WordPress.com.
I’ll see if I can help, but you need to give me links to the pages you are having issues with so that I can look at those. I’ve clicked on every link in the left sidebar on your site and do not see any issues.
Your top navigation seems to be something that you have built into the page content itself using a table, but you haven’t turned any of those works in that table (Home, Maritime Jobs, etc.) into links to those pages. The same for Sitemap, Contact and Policies at the bottom of your main page.
I’ll also need more detail on what isn’t working and what you are trying to accomplish so that I can help.
-
Oh I would be so happy if you could, thank you for your reply.
On all the pages the grey footer is far to large 48px but if I narrow it for example to 50px so I can have the policies etc horizontal
(checked on inspect element as I don’t know in which file the code is!)
then the policies go below the grey and the grey ends up not at the end of the page where it should touch the left hand list – same as homepage – but ends up on the bkgd pic . ( I had to set the bkgd pic on the pages to Fixed to get a good picture) –I also can’t remove the underlines from the list on the left on any pages – I have a header.php in filemanager and no <tr> or <td> or hr to take out of that. (I managed to do it on the homepage only)
I am trying to find how to get the link word “home” on the other pages . I presumed when pages were created each page would have it’s own code that I could manipulate, as I wanted to put the title “designers” in place of skippers on the designer page and so on.
But in the code by replacing skippers with film crew in the style-class3 gives me filmcrew on everypage! I realise Header.php is for header but the page file has no code in there. And where is the ghostly “masthead page”?
Many thanks for all your help. I include below the header.php code -
Header.php in 2014 theme (not in my child theme)
——-
<html <?php language_attributes(); ?>>
<!–<![endif]–>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<![endif]–>
<?php wp_head(); ?>
<style></style>
</head><body <?php body_class(); ?>>
<div id=”page” class=”hfeed site”>
<?php if ( get_header_image() ) : ?>
<div id=”site-header”>
” rel=”home”>
<img src=”<?php header_image(); ?>” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=””>
</div>
<?php endif; ?><header id=”masthead” class=”site-header” role=”banner”>
<div class=”logo”>
<span class=”style1″>FirstClass</span>
<span class=”style3″>Skippers</span>
<div align=”right”><img src=”http://www.firstclassskippers.net/wp-content/uploads/2014/01/header_underline.png” style=”float: left;
margin-left: 143px;” alt=”header_underline” width=”265″ height=”17″ /></div></div><div class=”social”><?php if ( function_exists(‘cn_social_icon’) ) echo cn_social_icon(); ?> <div align=”center”>like us</div></div>
</div><!– #masthead –>
<div id=”main” class=”site-main”>
-
Ok Now I see what you see – If I look at my site as a client and not as admin the pages look fine – but you can see the break in the page on the Marinas and ports between the list and the footer (in admin this is empazised)
still have the problem with removing the lines in the list on the pages and changing the word Skipper at the top to the name on each relevant page. Any pretty please chance of help there. p.s I haven’t got round to doing the links yet.
Once again marvelous of you to help me.
-
On your site main page, since it isn’t a WordPress page, you will need to seek help with that elsewhere.
For the lines in the left column on the WordPress pages, in .secondary-navigation li change
border-top: 1px solid rgba(255, 255, 255, 0.2);to
border-top: none;On the footer area, add the following at the end of your stylesheet and see what you think.
#menu-footermenu { display: inline-flex; position: relative; top: -30px; } #menu-footermenu li { margin-left: 20px; text-align: center; } #footer-sidebar { height: 30px !important; position: absolute; bottom: 0; } .site { position: relative; }The above isn’t perfect, but it gets you closer I believe.
-
Thank you ever so much for all your help – I shall try it and see what happens nothing to lose and lots to gain.
hope you are well
regards -
-
biankabooth
Why are you changing the parent themes header.php, it is much better to use the child theme otherwise when you upgrade the theme (because a fix needs to be applied) you could lose your changes.
Also if you are intending to make changes to header to have additional functionality you may consider doing custom pages and plugins. These are very easy
- The topic ‘How can I alter the width on the Menu drop downs?’ is closed to new replies.
WordPress.com Forums 